164 lines
7 KiB
HTML
164 lines
7 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>dijit.layout.BorderContainer Test</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../../dojo/resources/dojo.css";
|
||
|
|
@import "../css/dijitTests.css";
|
||
|
|
|
||
|
|
.dijitContentPane:focus { color: cyan; font-weight: bold }
|
||
|
|
body { margin-left: 20px }
|
||
|
|
|
||
|
|
#mondrian .dijitSplitter { border: 0; background: black !important }
|
||
|
|
#mondrian .dijitSplitterH { height: 10px }
|
||
|
|
#mondrian .dijitSplitterV { width: 10px }
|
||
|
|
#mondrian .dijitSplitterThumb { display: none }
|
||
|
|
#mondrian .dijitSplitterActive { background-color: blue }
|
||
|
|
#mondrian SPAN { display: none }
|
||
|
|
#mondrian:hover SPAN { display: inline }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
||
|
|
djConfig="isDebug: true, parseOnLoad: true"></script>
|
||
|
|
<script type="text/javascript" src="../_testCommon.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dijit.layout.BorderContainer");
|
||
|
|
dojo.require("dijit.layout.ContentPane");
|
||
|
|
dojo.require("dijit.form.FilteringSelect");
|
||
|
|
|
||
|
|
function togglePanel(button, id){
|
||
|
|
var leftPanel = dijit.byId(id);
|
||
|
|
if(leftPanel){
|
||
|
|
dijit.byId('border1').removeChild(leftPanel);
|
||
|
|
leftPanel.destroy();
|
||
|
|
button.innerHTML='Add left panel';
|
||
|
|
}else{
|
||
|
|
var container = dijit.byId('border1');
|
||
|
|
var div = dojo.doc.createElement('div');
|
||
|
|
div.innerHTML='left';
|
||
|
|
container.domNode.appendChild(div);
|
||
|
|
leftPanel = new dijit.layout.ContentPane({id: id, region:'left', style:'background-color: #acb386; width:100px', splitter:true, minSize:50, maxSize:150}, div);
|
||
|
|
dijit.byId('border1').addChild(leftPanel);
|
||
|
|
button.innerHTML='Remove left panel';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h2 class="testTitle">dijit.layout.BorderContainer tests</h2>
|
||
|
|
<p>Headline layout (default), left is constrained - min:50, max:150</p>
|
||
|
|
|
||
|
|
<div id="border1" dojoType="dijit.layout.BorderContainer"
|
||
|
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; border: 15px black solid; height: 100px;" splitter="true">
|
||
|
|
top bar
|
||
|
|
</div>
|
||
|
|
<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">
|
||
|
|
left
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf; padding: 30px;">
|
||
|
|
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
|
||
|
|
(to check we're copying children around properly).<br />
|
||
|
|
<select dojoType="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 dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 100px;">
|
||
|
|
right
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true">
|
||
|
|
bottom bar
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onClick="togglePanel(this, 'border1-left')">Remove left panel</button>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<p>Sidebar layout, BiDi sensitive, liveSplitters: false</p>
|
||
|
|
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" design="sidebar" liveSplitters="false"
|
||
|
|
style="border: 20px solid black; width: 90%; height: 300px; padding: 10px;">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="leading" style="background-color: #acb386; width: 100px;">
|
||
|
|
leading
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;">
|
||
|
|
top bar
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" 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 dojoType="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 dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true">
|
||
|
|
bottom bar
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="trailing" style="background-color: #acb386; width: 100px;" splitter="true">
|
||
|
|
trailing
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<p>Vertical panels only with splitters</p>
|
||
|
|
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" design="sidebar"
|
||
|
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 100px;" splitter="true">
|
||
|
|
top bar
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="dijit.layout.ContentPane" 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 dojoType="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 dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 100px;" splitter="true">
|
||
|
|
bottom bar
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<p>More fun with layouts</p>
|
||
|
|
|
||
|
|
<div id="mondrian" dojoType="dijit.layout.BorderContainer" design="sidebar" persist="true" style="height: 300px; width: 400px">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="top" style="height: 100px" splitter="true">
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="leading" style="width: 125px" splitter="true"><span>top a</span></div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="center" style="background-color: yellow" splitter="true"><span>top b</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px" splitter="true">
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 100px; width: 100%">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="top" style="height: 40px" splitter="true"><span>bottom c</span></div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="center"><span>bottom d</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="leading" style="width: 100px" splitter="true">
|
||
|
|
<div dojoType="dijit.layout.BorderContainer" persist="true" style="height: 300px; width: 100%">
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="center"><span>leading e</span></div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="bottom" style="height: 100px; background-color: red" splitter="true"><span>leading f</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="dijit.layout.ContentPane" region="trailing" style="width: 100px" splitter="true"><span>trailing g</span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|