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
269 lines (235 loc) • 13.2 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit/layout/BorderContainer Test</title>
<script src="../boilerplate.js"></script>
<style type="text/css">
/* styles for this test */
.dijitContentPane:focus { color: cyan; font-weight: bold }
body { margin-left: 20px }
#mondrian .dijitSplitter { border: 0; background: black }
#mondrian .dijitSplitterH { height: 10px }
#mondrian .dijitSplitterV { width: 10px }
#mondrian .dijitSplitterThumb { display: none }
#mondrian .dijitSplitterActive { background-color: blue }
.dj_webkit #mondrian .dijitSplitter:focus {
/* override orange focus border w/something easier to see (response to a11y bug report) */
outline: 5px blue;
}
#mondrian SPAN { display: none }
#mondrian:hover SPAN { display: inline }
#mondrian .dijitContentPane { padding: 0 }
</style>
<script type="text/javascript">
var bc, cp1, cp2, cp3;
require([
"dojo/_base/array",
"dojo/aspect",
"dojo/dom",
"dojo/dom-style",
"dojo/json",
"dojo/on",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/FilteringSelect",
"dojo/domReady!"
], function(array, aspect, dom, domStyle, json, on, parser, registry, BorderContainer, ContentPane, FilteringSelect){
togglePanel = function(button, id){
var leftPanel = registry.byId(id);
if(leftPanel){
registry.byId('border1').removeChild(leftPanel);
leftPanel.destroy();
button.innerHTML='Add left panel';
}else{
var container = registry.byId('border1');
var div = document.createElement('div');
div.innerHTML='left';
container.domNode.appendChild(div);
leftPanel = new ContentPane({id: id, region:'left', style:'background-color: #acb386; width:200px', splitter:true, minSize:150, maxSize:250}, div);
registry.byId('border1').addChild(leftPanel);
button.innerHTML='Remove left panel';
}
};
function watchSplitters(bc){
var out = dom.byId("watchedOutput");
var moveConnects = {};
array.forEach(["top", "left"], function(region){
var spl = bc.getSplitter(region);
aspect.after(spl, "_startDrag", function(){
domStyle.set(spl.child.domNode, "opacity", "0.4");
moveConnects[spl.widgetId] = on(spl.domNode, "mousemove", function(evt){
out.innerHTML = spl.region + ": " + json.stringify({
x: !spl.horizontal ? spl.domNode.style[spl.region] : 0,
y: spl.horizontal ? spl.domNode.style[spl.region] : 0
});
})
});
aspect.after(spl, "_stopDrag", function(evt){
domStyle.set(spl.child.domNode, "opacity", 1);
moveConnects[spl.widgetId].remove();
delete moveConnects[spl.widgetId];
});
})
}
parser.parse();
watchSplitters( registry.byId("watchedBC") );
bc = new BorderContainer({style:'height:400px;width:500px;border:1px solid black'}, dom.byId('main'));
cp1 = new ContentPane({region:'top',style:'height:100px;background-color:red',splitter:true, id:"cp1"});
cp1.domNode.innerHTML = "top pane";
bc.addChild(cp1);
cp2 = new ContentPane({region:'center',style:'background-color:green', id:'cp2'});
cp2.domNode.innerHTML = "center pane";
bc.addChild(cp2);
cp3 = new ContentPane({region:'left', splitter: true, style:'width: 100px;', id:'cp3'});
cp3.domNode.innerHTML = "left pane";
bc.startup();
});
</script>
</head>
<body class="claro" role="region" aria-label="main">
<h2 class="testTitle">dijit/layout/BorderContainer tests</h2>
<p>Headline layout (default), left is constrained - min:150, max:250</p>
<div id="border1" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props='style:"width: 1000px; height: 300px; border: 2px solid blue;"'>
<div role="banner" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-top", region:"top", style:"background-color: #b39b86; border: 15px black solid; height: 50px;", splitter:true'>
top bar (resizable)
</div>
<div role="navigation" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-left", region:"left", style:"background-color: #acb386; border: 10px green solid; width: 100px;",
splitter:true, minSize:150, maxSize:250'>
left (resizable b/w 150 → 250)
</div>
<div role="main" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-center", 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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-right", region:"right", style:"background-color: #acb386; width: 100px;"'>
right (fixed size)
</div>
<div role="contentinfo" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border1-bottom", region:"bottom", style:"background-color: #b39b86; height: 50px;", splitter:true'>
bottom bar (resizable)
</div>
</div>
<button id="toggleLeftButton" onClick="togglePanel(this, 'border1-left')">Remove left panel</button>
<br />
<p>Sidebar layout, BiDi sensitive, liveSplitters: false</p>
<div id="border2" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", liveSplitters:false,
style:"border: 20px solid black; width: 1000px; height: 300px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-leading", region:"leading", style:"background-color: #acb386; width: 100px;"'>
leading (fixed size)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-top", region:"top", style:"background-color: #b39b86; height: 80px;"'>
top bar (fixed size)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-center", 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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-bottom", region:"bottom", style:"background-color: #b39b86; height: 80px;", splitter:true'>
bottom bar (resizable)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='id:"border2-trailing", region:"trailing", style:"background-color: #acb386; width: 100px;", splitter:true'>
trailing (resizable)
</div>
</div>
<p>gutters=false layout</p>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", gutters:false,
style:"border: 20px solid black; width: 1000px; height: 300px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"leading", style:"background-color: #acb386; width: 100px;"'>
leading
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"background-color: #b39b86; height: 80px;"'>
top 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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"background-color: #b39b86; height: 80px;"'>
bottom bar
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"trailing", style:"background-color: #acb386; width: 100px;"'>
trailing
</div>
</div>
<p>Vertical panels only with splitters</p>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar",
style:"border: 2px solid black; width: 1000px; height: 300px; padding: 10px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"background-color: #b39b86; height: 80px;", splitter:true'>
top 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 data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"background-color: #b39b86; height: 80px;", splitter:true'>
bottom bar
</div>
</div>
<br />
<p>More fun with layouts</p>
<div id="mondrian" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='design:"sidebar", gutters:false, persist:true, style:"height: 300px; width: 400px;"'>
<div id="mondrian_top" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"height: 100px", splitter:true'>
<div id="mondrian_top_bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:true, gutters:false, style:"height: 100px; width: 100%"'>
<div id="top_a" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"leading", style:"width: 125px", splitter:true'><span>top a</span></div>
<div id="top_b" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", style:"background-color: yellow", splitter:true'><span>top b</span></div>
</div>
</div>
<div id="mondrian_bottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"height: 100px", splitter:true'>
<div id="mondrian_bottom_bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:true, gutters:false, style:"height: 100px; width: 100%"'>
<div id="bottom_c" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", style:"height: 40px; background-color: blue;", splitter:true'><span>bottom c</span></div>
<div id="bottom_d" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'><span>bottom d</span></div>
</div>
</div>
<div id="mondrian_leading" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"leading", style:"width: 100px", splitter:true'>
<div id="mondrian_leading_bc" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:true, gutters:false, style:"height: 300px; width: 100%"'>
<div id="leading_e" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'><span>leading e</span></div>
<div id="leading_f" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", style:"height: 100px; background-color: red", splitter:true'><span>leading f</span></div>
</div>
</div>
<div id="trailing_g" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", splitter:true'><span>trailing g</span></div>
<div id="trailing_h" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"trailing", style:"width: 100px", splitter:true'><span>trailing g</span></div>
</div>
<br />
<p>Watching the splitter events</p>
<div id="watchedBC" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='persist:false, gutters:false, style:"height: 200px; width: 100%"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", splitter:true, style:"background-color: #ccffcc; height: 50px;"'>Top:</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"left", style:"background-color: #ccccff; width: 40px", splitter:true'><span>Left</span></div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", style:"background-color: #ffffcc"'><span>Center</span></div>
</div>
<p>Splitter coords output:</p>
<div id="watchedOutput" style="border: 1px solid #999">nothing moving</div>
<h2 class="testTitle">dijit/layout/BorderContainer programmatic test</h2>
<div id='main'></div>
<button id="addLeft" onclick="bc.addChild(cp3);">add left pane</button>
<button id="removeLeft" onclick="bc.removeChild(cp3);">remove left pane</button>
<button id="addTop" onclick="bc.addChild(cp1);">add top pane</button>
<button id="removeTop" onclick="bc.removeChild(cp1);">remove top pane</button>
</body>
</html>