Ticket #6781: test_BorderContainer_showHideRegion.html

File test_BorderContainer_showHideRegion.html, 3.0 kB (added by guest, 8 months ago)
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4    <title>dijit.layout.BorderContainer Test</title>
5
6        <!-- only needed for test files: -->
7        <style type="text/css">
8                @import "../../../dojo/resources/dojo.css";
9                @import "../css/dijitTests.css";
10        </style>
11
12        <!-- required: the default dijit theme: -->
13        <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css" />
14
15        <!-- required: dojo.js -->
16        <script type="text/javascript" src="../../../dojo/dojo.js"
17                djConfig="isDebug: true, parseOnLoad: true"></script>
18
19        <!-- only needed for alternate theme testing: -->
20        <script type="text/javascript" src="../_testCommon.js"></script>
21        <script type="text/javascript" src="../../../dijit/layout/BorderContainer.js"></script>
22        <script type="text/javascript">
23                dojo.require("dijit.dijit"); // optimize: load dijit layer
24                dojo.require("dijit.layout.BorderContainer");
25        dojo.require("dijit.layout.ContentPane");
26        var addPane = function(parent,kw){
27                 var domnode = document.createElement('div');
28                 parent.domNode.appendChild(domnode);
29                 var widget = new dijit.layout.ContentPane(kw,domnode);
30                 widget.startup();
31                 parent.addChild(widget);
32         };
33        var showHide = function(region,show){
34            var bc= dijit.byId('main_bc')
35            bc.showHideRegion(region,show)
36        };
37        dojo.addOnLoad(function(){
38                var bc = new dijit.layout.BorderContainer({id:'main_bc', style:'height:400px;width:500px;border:1px solid black'}, dojo.byId('main'));
39                addPane(bc,{region:'top',style:'height:100px;background-color:red',splitter:true});
40                addPane(bc,{region:'bottom',style:'height:100px;background-color:pink',splitter:true});
41                addPane(bc,{region:'left',style:'width:100px;background-color:green',splitter:true});
42                addPane(bc,{region:'right',style:'width:100px;background-color:blue',splitter:true});
43                addPane(bc,{region:'center',style:'background-color:silver'});
44                bc.startup();
45        });
46        </script>
47</head>
48<body>
49    <h2 class="testTitle">dijit.layout.BorderContainer  show/hide regions tests</h2>
50    <div id='main'>
51       
52    </div>
53    <div style='margin-top:10px;'>
54        <button onClick="showHide('top',true);">Show top</button>
55        <button onClick="showHide('top',false);">Hide top</button>
56    </div>
57    <div style='margin-top:10px;'>
58        <button onClick="showHide('left',true);">Show left</button>
59        <button onClick="showHide('left',false);">Hide left</button>
60    </div>
61    <div style='margin-top:10px;'>
62        <button onClick="showHide('bottom',true);">Show bottom</button>
63        <button onClick="showHide('bottom',false);">Hide bottom</button>
64    </div>
65    <div style='margin-top:10px;'>
66        <button onClick="showHide('right',true);">Show right</button>
67        <button onClick="showHide('right',false);">Hide right</button>
68    </div>
69</body>
70</html>