1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <title>dijit.layout.BorderContainer Test</title>
6 <style type="text/css">
7 @import "../../../dojo/resources/dojo.css";
8 @import "../css/dijitTests.css";
10 .dijitContentPane:focus { color: cyan; font-weight: bold }
11 body { margin-left: 20px }
13 #mondrian .dijitSplitter { border: 0; background: black !important }
14 #mondrian .dijitSplitterH { height: 10px }
15 #mondrian .dijitSplitterV { width: 10px }
16 #mondrian .dijitSplitterThumb { display: none }
17 #mondrian .dijitSplitterActive { background-color: blue }
18 #mondrian SPAN { display: none }
19 #mondrian:hover SPAN { display: inline }
22 <script type="text/javascript" src="../../../dojo/dojo.js"
23 djConfig="isDebug: true, parseOnLoad: true"></script>
24 <script type="text/javascript" src="../_testCommon.js"></script>
26 <script type="text/javascript">
27 dojo.require("dijit.layout.BorderContainer");
28 dojo.require("dijit.layout.ContentPane");
29 dojo.require("dijit.form.FilteringSelect");
31 function togglePanel(button, id){
32 var leftPanel = dijit.byId(id);
34 dijit.byId('border1').removeChild(leftPanel);
36 button.innerHTML='Add left panel';
38 var container = dijit.byId('border1');
39 var div = dojo.doc.createElement('div');
41 container.domNode.appendChild(div);
42 leftPanel = new dijit.layout.ContentPane({id: id, region:'left', style:'background-color: #acb386; width:100px', splitter:true, minSize:50, maxSize:150}, div);
43 dijit.byId('border1').addChild(leftPanel);
44 button.innerHTML='Remove left panel';
51 <h2 class="testTitle">dijit.layout.BorderContainer tests</h2>
52 <p>Headline layout (default), left is constrained - min:50, max:150</p>
54 <div id="border1" dojoType="dijit.layout.BorderContainer"
55 style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
56 <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; border: 15px black solid; height: 100px;" splitter="true">
59 <div id="border1-left" dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; border: 10px green solid; width: 100px;" splitter="true" minSize="50" maxSize="150">
62 <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 30px;">
63 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
64 (to check we're copying children around properly).<br />
65 <select dojoType="dijit.form.FilteringSelect">
66 <option value="1">foo</option>
67 <option value="2">bar</option>
68 <option value="3">baz</option>
70 Here's some text that comes AFTER the combo box.
72 <div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;">
75 <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true">
80 <button onClick="togglePanel(this, 'border1-left')">Remove left panel</button>
83 <p>Sidebar layout, BiDi sensitive, liveSplitters: false</p>
85 <div dojoType="dijit.layout.BorderContainer" design="sidebar" liveSplitters="false"
86 style="border: 20px solid black; width: 90%; height: 300px; padding: 10px;">
87 <div dojoType="dijit.layout.ContentPane" region="leading" style="background-color: #acb386; width: 100px;">
90 <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;">
93 <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;">
94 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
95 (to check we're copying children around properly).<br />
96 <select dojoType="dijit.form.FilteringSelect">
97 <option value="1">foo</option>
98 <option value="2">bar</option>
99 <option value="3">baz</option>
101 Here's some text that comes AFTER the combo box.
103 <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true">
106 <div dojoType="dijit.layout.ContentPane" region="trailing" style="background-color: #acb386; width: 100px;" splitter="true">
112 <p>Vertical panels only with splitters</p>
114 <div dojoType="dijit.layout.BorderContainer" design="sidebar"
115 style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
116 <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;" splitter="true">
120 <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;">
121 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
122 (to check we're copying children around properly).<br />
123 <select dojoType="dijit.form.FilteringSelect">
124 <option value="1">foo</option>
125 <option value="2">bar</option>
126 <option value="3">baz</option>
128 Here's some text that comes AFTER the combo box.
130 <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true">
136 <p>More fun with layouts</p>
138 <div id="mondrian" dojoType="dijit.layout.BorderContainer" design="sidebar" persist="true" style="height: 300px; width: 400px">
139 <div dojoType="dijit.layout.ContentPane" region="top" style="height: 100px" splitter="true">
140 <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%">
141 <div dojoType="dijit.layout.ContentPane" region="leading" style="width: 125px" splitter="true"><span>top a</span></div>
142 <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: yellow" splitter="true"><span>top b</span></div>
145 <div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px" splitter="true">
146 <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%">
147 <div dojoType="dijit.layout.ContentPane" region="top" style="height: 40px" splitter="true"><span>bottom c</span></div>
148 <div dojoType="dijit.layout.ContentPane" region="center"><span>bottom d</span></div>
151 <div dojoType="dijit.layout.ContentPane" region="leading" style="width: 100px" splitter="true">
152 <div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 300px; width: 100%">
153 <div dojoType="dijit.layout.ContentPane" region="center"><span>leading e</span></div>
154 <div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px; background-color: red" splitter="true"><span>leading f</span></div>
157 <div dojoType="dijit.layout.ContentPane" region="trailing" style="width: 100px" splitter="true"><span>trailing g</span></div>