1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <title>dijit.layout.BorderContainer Test - complex layout</title>
6 <style type="text/css">
7 @import "../../../dojo/resources/dojo.css";
8 @import "../css/dijitTests.css";
11 <script type="text/javascript" src="../../../dojo/dojo.js"
12 djConfig="isDebug: true, parseOnLoad: true"></script>
13 <script type="text/javascript" src="../_testCommon.js"></script>
15 <script type="text/javascript">
16 dojo.require("dijit.Editor");
17 dojo.require("dijit.layout.AccordionContainer");
18 dojo.require("dijit.layout.TabContainer");
19 dojo.require("dijit.layout.LinkPane");
20 dojo.require("dijit.Tooltip");
21 dojo.require("dijit.layout.BorderContainer");
22 dojo.require("dijit.layout.SplitContainer");
23 dojo.require("dijit.layout.ContentPane");
24 dojo.require("dijit.form.FilteringSelect");
29 <h2 class="testTitle">dijit.layout.BorderContainer tests</h2>
31 <p>Complex layout:</p>
33 <div dojoType="dijit.layout.BorderContainer"
34 style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
35 <div dojoType="dijit.layout.AccordionContainer" duration="200"
36 region="left" style="background-color: #acb386; width: 400px;" splitter="true"
37 style="float: left; width: 400px; height: 300px; overflow: hidden">
38 <div dojoType="dijit.layout.AccordionPane" title="a">
41 <div dojoType="dijit.layout.AccordionPane" title="b">
43 Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
44 suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
45 Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
46 bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam
47 aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
48 ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
49 dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
53 Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
54 Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
55 vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
56 augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
57 metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
58 ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
59 euismod, magna nulla viverra libero, sit amet lacinia odio diam id
60 risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
61 porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
62 faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
63 consequat quis, varius interdum, nulla. Donec neque tortor,
64 sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
65 ut eros sit amet ante pharetra interdum.
68 <div dojoType="dijit.layout.AccordionPane" title="c">
69 <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
73 <div dojoType="dijit.layout.AccordionContainer" duration="200"
74 region="right" style="background-color: #acb386; width: 200px;"
75 style="float: left; width: 200px; height: 300px; overflow: hidden">
76 <div dojoType="dijit.layout.AccordionPane" title="a">
79 <div dojoType="dijit.layout.AccordionPane" title="b">
81 Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
82 suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
83 Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
84 bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam
85 aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
86 ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
87 dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
91 Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
92 Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
93 vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
94 augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
95 metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
96 ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
97 euismod, magna nulla viverra libero, sit amet lacinia odio diam id
98 risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
99 porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
100 faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
101 consequat quis, varius interdum, nulla. Donec neque tortor,
102 sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
103 ut eros sit amet ante pharetra interdum.
106 <div dojoType="dijit.layout.AccordionPane" title="c">
107 <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
110 <div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;" splitter="true">
112 <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;">
114 <div id="tab1" dojoType="dijit.layout.ContentPane" href="../../../dijit/tests/layout/tab1.html" title="Tab 1"></div>
116 <div id="tab2" dojoType="dijit.layout.ContentPane" href="../../../dijit/tests/layout/tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>
118 <div dojoType="dijit.layout.ContentPane" title="Tab 3">
120 <p>And I was already part of the page! That's cool, no?</p>
121 <p id="foo">tooltip on this paragraph</p>
122 <div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
123 <button dojoType="dijit.form.Button">I'm a button </button>
125 <button dojoType="dijit.form.Button">So am I!</button>
127 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
128 semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
129 porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
130 Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
131 Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
134 <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
135 imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
136 nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
137 massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
138 pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
139 quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
140 felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
141 quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
142 rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
143 semper velit ante id metus. Praesent massa dolor, porttitor sed,
144 pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
145 tortor pharetra congue. Suspendisse pulvinar.
149 <div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer">
150 <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab1.html">SubTab 1</a>
151 <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab2.html" selected="true">SubTab 2</a>
154 <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab3.html">Sub TabContainer from href</a>
156 <a dojoType="dijit.layout.LinkPane" href="../../../dijit/tests/layout/tab4.html">SplitContainer from href</a>
160 <div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;">
161 <div style="border: 1px solid black;">
162 <div dojoType="dijit.Editor" id="editor1"><p>bottom bar (edit me)</p></div>
165 <div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 10px;">
166 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
167 (to check we're copying children around properly).<br />
168 <select dojoType="dijit.form.FilteringSelect">
169 <option value="1">foo</option>
170 <option value="2">bar</option>
171 <option value="3">baz</option>
173 Here's some text that comes AFTER the combo box.