aboutsummaryrefslogtreecommitdiff
path: root/includes/js/dijit/tests/layout/test_LayoutContainer.html
diff options
context:
space:
mode:
authormensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
committermensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
commite44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/layout/test_LayoutContainer.html
parenta62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
downloadsemanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/tests/layout/test_LayoutContainer.html')
-rw-r--r--includes/js/dijit/tests/layout/test_LayoutContainer.html174
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=&quot;0&quot; 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=&quot;0&quot; 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=&quot;0&quot; 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>