295 lines
12 KiB
HTML
295 lines
12 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>dijit.layout.LayoutContainer Test</title>
|
|
|
|
<style type="text/css">
|
|
@import "../../themes/claro/document.css";
|
|
@import "../../themes/claro/claro.css";
|
|
</style>
|
|
|
|
<!-- required: the default dijit theme: -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
djConfig="isDebug: true"></script>
|
|
|
|
<!-- only needed for alternate theme testing: do NOT use in your code! -->
|
|
<script type="text/javascript" src="../_testCommon.js"></script>
|
|
|
|
<script type="text/javascript" src="../helpers.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("doh.runner");
|
|
dojo.require("dijit.dijit"); // optimize: load dijit layer
|
|
dojo.require("dijit.layout.LayoutContainer");
|
|
dojo.require("dijit.layout.ContentPane");
|
|
dojo.require("dijit.form.FilteringSelect");
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
|
|
|
function checkInside(/*Widget*/ child, /*Widget*/ parent){
|
|
// summary:
|
|
// Test that child is fully inside of parent
|
|
var cp = dojo.position(child.domNode, true),
|
|
pp = dojo.position(parent.domNode, true);
|
|
|
|
doh.t(
|
|
cp.y > pp.y && cp.y+cp.h < pp.y+pp.h &&
|
|
cp.x > pp.x && cp.x+cp.w < pp.x+pp.w,
|
|
child.layoutAlign + " inside " + parent.id + dojo.toJson(cp) + dojo.toJson(pp)
|
|
);
|
|
}
|
|
function checkAbove(/*String*/ comment, /*Widget*/ above, /*Widget*/ below){
|
|
// summary:
|
|
// Test that child is fully inside of parent
|
|
|
|
var ap = dojo.position(above.domNode, true),
|
|
bp = dojo.position(below.domNode, true);
|
|
|
|
doh.t(ap.y+ap.h <= bp.y,
|
|
comment + " " + above.layoutAlign + " above " + below.layoutAlign + dojo.toJson(ap) + dojo.toJson(bp)
|
|
);
|
|
}
|
|
function checkLeft(/*String*/ comment, /*Widget*/ left, /*Widget*/ right){
|
|
// summary:
|
|
// Test that child is fully inside of parent
|
|
|
|
var lp = dojo.position(left.domNode, true),
|
|
rp = dojo.position(right.domNode, true);
|
|
|
|
doh.t(lp.x+lp.w <= rp.x,
|
|
comment + " " + left.layoutAlign + " to left of " + right.layoutAlign + dojo.toJson(lp) + dojo.toJson(rp)
|
|
);
|
|
}
|
|
|
|
dojo.ready(function(){
|
|
doh.register("parse", function(){
|
|
dojo.parser.parse();
|
|
});
|
|
|
|
doh.register("LayoutContainer", [
|
|
function basic(){
|
|
var lc = dijit.byId("basic");
|
|
dojo.forEach(lc.getChildren(), function(child){
|
|
checkInside(child, lc);
|
|
});
|
|
|
|
var left = dijit.byId("leftcp_layout1"),
|
|
top = dijit.byId("topcp_layout1"),
|
|
right = dijit.byId("rightcp_layout1"),
|
|
center = dijit.byId("centercp_layout1"),
|
|
bottom = dijit.byId("bottomcp_layout1");
|
|
|
|
// Check positions
|
|
checkLeft("left vs top", left, top);
|
|
checkLeft("left vs center", left, center);
|
|
checkLeft("bottom vs right", bottom, right);
|
|
checkAbove("top vs center", top, center);
|
|
checkAbove("center vs bottom", center, bottom);
|
|
|
|
// Check tab order
|
|
var tabbable = tabOrder(lc.domNode);
|
|
doh.is(7, tabbable.length, "each pane plus link and select");
|
|
doh.is(left.id, tabbable[0].id, "left");
|
|
doh.is(right.id, tabbable[1].id, "right");
|
|
doh.is(top.id, tabbable[2].id, "top");
|
|
doh.is(center.id, tabbable[3].id, "center");
|
|
doh.is(bottom.id, tabbable[6].id, "bottom");
|
|
},
|
|
|
|
function advanced(){
|
|
var lc = dijit.byId("advanced");
|
|
dojo.forEach(lc.getChildren(), function(child){
|
|
checkInside(child, lc);
|
|
});
|
|
|
|
var left = dijit.byId("leftcp_layout2"),
|
|
top = dijit.byId("topcp_layout2"),
|
|
right = dijit.byId("rightcp_layout2"),
|
|
centerLeft = dijit.byId("centerLeftcp_layout2"),
|
|
center = dijit.byId("centercp_layout2"),
|
|
centerRight = dijit.byId("centerRightcp_layout2"),
|
|
bottom = dijit.byId("bottomcp_layout2");
|
|
|
|
// Check positions
|
|
checkLeft("left vs top", left, top);
|
|
checkLeft("left vs centerLeft", left, centerLeft);
|
|
checkLeft("centerLeft vs center", centerLeft, center);
|
|
checkLeft("center vs centerRight", center, centerRight);
|
|
checkAbove("top vs center", top, center);
|
|
checkAbove("top vs inner right", top, centerRight);
|
|
checkAbove("centerLeft vs bottom", centerLeft, bottom);
|
|
|
|
// Check tab order
|
|
var tabbable = tabOrder(lc.domNode);
|
|
doh.is(8, tabbable.length, "each pane plus link and select");
|
|
doh.is(left.id, tabbable[0].id, "left");
|
|
doh.is(top.id, tabbable[1].id, "top");
|
|
doh.is(bottom.id, tabbable[2].id, "bottom");
|
|
doh.is(centerLeft.id, tabbable[3].id, "center left");
|
|
doh.is(center.id, tabbable[4].id, "center");
|
|
doh.is(centerRight.id, tabbable[7].id, "center right");
|
|
}
|
|
]);
|
|
|
|
doh.run();
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body class="claro">
|
|
<h2 id="heading" >Dijit layout.LayoutContainer tests</h2>
|
|
|
|
<p>Basic layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order
|
|
should be: left, right, top, middle/main, bottom</p>
|
|
|
|
<div id="basic" dojoType="dijit.layout.LayoutContainer"
|
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
|
|
>
|
|
<div dojoType="dijit.layout.ContentPane" id="leftcp_layout1" layoutAlign="left" style="background-color: #acb386; width: 100px;" tabindex="0">
|
|
left
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="rightcp_layout1" layoutAlign="right" style="background-color: #acb386;" tabindex="0">
|
|
right
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="topcp_layout1" layoutAlign="top" style="background-color: #b39b86; " tabindex="0">
|
|
top bar
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="centercp_layout1" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;" tabindex="0">
|
|
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" id="bottomcp_layout1" layoutAlign="bottom" style="background-color: #b39b86;" tabindex="0">
|
|
bottom bar
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>Advanced layout. Tabindex="0" added to each pane to test for tab order matching source code order. Tab order
|
|
should be: left, top, bottom, inner left, inner middle, inner right. This is not an ideal tab order. See below to use nested
|
|
layout containers to achieve a tab order which matches presentation and source code order.</p>
|
|
<div id="advanced" dojoType="dijit.layout.LayoutContainer"
|
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
|
|
>
|
|
<div dojoType="dijit.layout.ContentPane" id="leftcp_layout2" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
|
|
left
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="topcp_layout2" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0">
|
|
top bar
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="bottomcp_layout2" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0">
|
|
|
|
bottom bar
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="centerLeftcp_layout2" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
|
|
inner left
|
|
</div>
|
|
|
|
<div dojoType="dijit.layout.ContentPane" id="centercp_layout2" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
|
|
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" id="centerRightcp_layout2" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
|
|
inner right
|
|
</div>
|
|
</div>
|
|
|
|
<p>Advanced layout with nested containers. Tabindex="0" added to content panes to show tab order. Order should be:
|
|
left, top, inner left, inner middle, inner right, bottom. This is the preferred tab order for this type of layout.</p>
|
|
<div dojoType="dijit.layout.LayoutContainer"
|
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
|
|
>
|
|
<div dojoType="dijit.layout.ContentPane" id="leftcp_layout3" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
|
|
left
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;" >
|
|
<div dojoType="dijit.layout.LayoutContainer" style="height:90%;border: 2px solid black;padding: 10px;">
|
|
|
|
<div dojoType="dijit.layout.ContentPane" id="topcp_layout3" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0">
|
|
top bar
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;">
|
|
<div dojoType="dijit.layout.LayoutContainer" style="height:80%;border: 2px solid black;padding: 10px;">
|
|
<div dojoType="dijit.layout.ContentPane" id="centerLeftcp_layout3" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
|
|
inner left
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="centercp_layout3" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
|
|
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" id="centerRightcp_layout3" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
|
|
inner right
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" id="bottomcp_layout3" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0" >
|
|
bottom bar
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Goofy spiral layout. Match of source code order to tab order can not be achieved with this type of layout.</p>
|
|
<div dojoType="dijit.layout.LayoutContainer"
|
|
style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
|
|
>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #663333; color: white; width: 100px;">
|
|
outer left
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #333366; color: white; height: 50px;">
|
|
outer top
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #663333; color: white; width: 100px;">
|
|
outer right
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #333366; color: white; height: 50px;">
|
|
outer bottom
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #99CC99; width: 100px;">
|
|
inner left
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #999966; height: 50px;">
|
|
inner top
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #99CC99; width: 100px;">
|
|
inner right
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #999966; height: 50px;">
|
|
inner bottom
|
|
</div>
|
|
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="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>
|
|
|
|
</body>
|
|
</html>
|