diff options
Diffstat (limited to 'includes/js/dijit/tests/layout/test_LayoutContainer.html')
| -rw-r--r-- | includes/js/dijit/tests/layout/test_LayoutContainer.html | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/test_LayoutContainer.html b/includes/js/dijit/tests/layout/test_LayoutContainer.html new file mode 100644 index 0000000..cbe08f6 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_LayoutContainer.html @@ -0,0 +1,174 @@ +<!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 "../../../dojo/resources/dojo.css"; + @import "../../themes/tundra/tundra.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + + <script type="text/javascript"> + 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 + </script> + +</head> +<body class="tundra"> +<h2>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 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: #acb386; width: 100px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #acb386;" tabindex="0"> + right + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; " tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" 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" 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 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: #acb386; width: 100px; margin: 5px;" tabindex="0"> + left + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + top bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0"> + + bottom bar + </div> + <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner left + </div> + + <div dojoType="dijit.layout.ContentPane" 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" 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" 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" 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" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner left + </div> + <div dojoType="dijit.layout.ContentPane" 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" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0"> + inner right + </div> + </div> + </div> + <div dojoType="dijit.layout.ContentPane" 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> |