dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
124 lines (116 loc) • 6.57 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit/layout/BorderContainer Nested Test</title>
<script src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/FilteringSelect",
"dijit/layout/TabContainer",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
</head>
<body class="claro" role="main">
<h2 class="testTitle">dijit/layout/BorderContainer Nested tests</h2>
<p>
The second tab holds a single BorderContainer but specifying layoutPriority on it's children to have multiple children
for each region.
</p>
<p>
The first tab holds a BorderContainer which nests another BorderContainer, simulating multiple children in a single region.
</p>
<div id="tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width:800px;height:600px;"'>
<div id="nbc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='title:"Nested BC"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"background-color: #acb386; width: 100px;"'>
left
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"right", style:"background-color: #acb386; width: 100px;"'>
right
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"background-color: #b39b86; height: 100px;"'>
top bar
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"background-color: #b39b86; height: 100px;"'>
bottom bar
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='region:"center", design:"sidebar"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"background-color: #acb386; width: 100px;"'>
left inner
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"right", style:"background-color: #acb386; width: 100px;"'>
right inner
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"background-color: #b39b86; height: 100px;"'>
inner top bar
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"background-color: #b39b86; height: 100px;"'>
inner bottom bar
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", style:"background-color: #f5ffbf; padding: 10px;"'>
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
(to check we're copying children around properly).<br />
<select aria-label="select" data-dojo-type="dijit/form/FilteringSelect">
<option value="1">foo</option>
<option value="2">bar</option>
<option value="3">baz</option>
</select>
Here's some text that comes AFTER the combo box.
</div>
</div>
</div>
<div id="pbc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='title:"layoutPriority BC"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"top1", region:"top", splitter:true, layoutPriority: 1, style:"background-color: #077; color: white; height: 50px;"'>
<label for="top1_input">top bar (layoutPriority == 1)</label>
<input id="top1_input" value="tabstop #1"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"top2", region:"top", splitter:true, layoutPriority: 2, style:"background-color: #f5ffbf; height: 50px;"'>
<label for="top2_input">second top bar (layoutPriority == 2)</label>
<input id="top2_input" value="tabstop #3"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"left1", region:"left", splitter:true, layoutPriority: 3, style:"background-color: #770; width: 100px;"'>
<label for="left1_input">left (layoutPriority == 3)</label>
<input id="left1_input" value="tabstop #5"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"left2", region:"left", splitter:true, layoutPriority: 4, style:"background-color: #acb386; width: 100px;"'>
<label for="left2_input">inner left (layoutPriority == 4)</label>
<input id="left2_input" value="tabstop #7"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"top3", region:"top", splitter:true, layoutPriority: 5, style:"background-color: #b39b86; height: 50px;"'>
<label for="top3_input">inner top bar (layoutPriority == 5)</label>
<input id="top3_input" value="tabstop #9"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"center", region:"center", style:"background-color: #f5ffbf; padding: 10px;"'>
<label for="center_input">center</label>
<input id="center_input" value="tabstop #11"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"bottom3", region:"bottom", splitter:true, layoutPriority: 5, style:"background-color: #b39b86; height: 50px;"'>
<label for="bottom3_input">inner bottom bar (layoutPriority == 5)</label>
<input id="bottom3_input" value="tabstop #12"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"right2", region:"right", splitter:true, layoutPriority: 4, style:"background-color: #acb386; width: 100px;"'>
<label for="right2_input">inner right (layoutPriority == 4)</label>
<input id="right2_input" value="tabstop #14"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"right1", region:"right", splitter:true, layoutPriority: 3, style:"background-color: #770; width: 100px;"'>
<label for="right1_input">right (layoutPriority == 3)</label>
<input id="right1_input" value="tabstop #16"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"bottom2", region:"bottom", splitter:true, layoutPriority: 2, style:"background-color: #f5ffbf; height: 50px;"'>
<label for="bottom2_input">second bottom bar (layoutPriority == 2)</label>
<input id="bottom2_input" value="tabstop #18"/>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id: "bottom1", region:"bottom", splitter:true, layoutPriority: 1, style:"background-color: #077; color: white; height: 50px;"'>
<label for="bottom1_input">bottom bar (layoutPriority == 1)</label>
<input id="bottom1_input" value="tabstop #20"/>
</div>
</div>
</div>
</body>
</html>