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, 0 insertions, 174 deletions
diff --git a/includes/js/dijit/tests/layout/test_LayoutContainer.html b/includes/js/dijit/tests/layout/test_LayoutContainer.html deleted file mode 100644 index cbe08f6..0000000 --- a/includes/js/dijit/tests/layout/test_LayoutContainer.html +++ /dev/null @@ -1,174 +0,0 @@ -<!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> |