--- /dev/null
+<!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>
projects / eow / blobdiff