git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/layout/test_LayoutContainer.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4         <title>dijit.layout.LayoutContainer Test</title>
   5
   6         <style type="text/css">
   7                 @import "../../../dojo/resources/dojo.css";
   8                 @import "../../themes/tundra/tundra.css";
   9         </style>
  10
  11         <script type="text/javascript" src="../../../dojo/dojo.js"
  12                 djConfig="isDebug: true, parseOnLoad: true"></script>
  13
  14         <script type="text/javascript">
  15                 dojo.require("dijit.layout.LayoutContainer");
  16                 dojo.require("dijit.layout.ContentPane");
  17                 dojo.require("dijit.form.FilteringSelect");
  18                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  19         </script>
  20
  21 </head>
  22 <body class="tundra">
  23 <h2>Dijit layout.LayoutContainer tests</h2>
  24 <p>Basic layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
  25 should be:  left, right, top, middle/main, bottom</p>
  26
  27 <div dojoType="dijit.layout.LayoutContainer"
  28         style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
  29 >
  30         <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;" tabindex="0">
  31                 left
  32         </div>
  33         <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #acb386;"  tabindex="0">
  34                 right
  35         </div>
  36         <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86; "  tabindex="0">
  37                 top bar
  38         </div>
  39         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;"  tabindex="0">
  40                 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
  41                 (to check we're copying children around properly).<br />
  42                 <select dojoType="dijit.form.FilteringSelect">
  43                         <option value="1">foo</option>
  44                         <option value="2">bar</option>
  45                         <option value="3">baz</option>
  46                 </select>
  47                 Here's some text that comes AFTER the combo box.
  48         </div>
  49
  50         <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86;"  tabindex="0">
  51                 bottom bar
  52         </div>
  53
  54 </div>
  55
  56 <p>Advanced layout. Tabindex=&quot;0&quot; added to each pane to test for tab order matching source code order.  Tab order
  57 should be:  left, top, bottom, inner left, inner middle, inner right. This is not an ideal tab order. See below to use nested
  58 layout containers to achieve a tab order which matches presentation and source code order.</p>
  59 <div dojoType="dijit.layout.LayoutContainer"
  60         style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
  61 >
  62         <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
  63                 left
  64         </div>
  65         <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86;  margin: 5px;" tabindex="0">
  66                 top bar
  67         </div>
  68         <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0">
  69
  70                 bottom bar
  71         </div>
  72         <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
  73                 inner left
  74         </div>
  75
  76         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
  77                 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
  78
  79                 (to check we're copying children around properly).<br />
  80                 <select dojoType="dijit.form.FilteringSelect">
  81                         <option value="1">foo</option>
  82                         <option value="2">bar</option>
  83                         <option value="3">baz</option>
  84                 </select>
  85                 Here's some text that comes AFTER the combo box.
  86         </div>
  87         <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
  88                 inner right
  89         </div>
  90 </div>
  91
  92 <p>Advanced layout with nested containers.  Tabindex=&quot;0&quot; added to content panes to show tab order. Order should be:
  93 left, top, inner left, inner middle, inner right, bottom. This is the preferred tab order for this type of layout.</p>
  94 <div dojoType="dijit.layout.LayoutContainer"
  95         style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
  96 >
  97         <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px; margin: 5px;" tabindex="0">
  98                 left
  99         </div>
 100         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;" >
 101                 <div dojoType="dijit.layout.LayoutContainer"    style="height:90%;border: 2px solid black;padding: 10px;">
 102
 103                         <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #b39b86;  margin: 5px;" tabindex="0">
 104                                 top bar
 105                         </div>
 106                         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="margin: 5px;">
 107                                 <div dojoType="dijit.layout.LayoutContainer"    style="height:80%;border: 2px solid black;padding: 10px;">
 108                                         <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
 109                                                 inner left
 110                                         </div>
 111                                         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px; margin: 5px;" tabindex="0">
 112                                                 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
 113                                                 (to check we're copying children around properly).<br />
 114                                                 <select dojoType="dijit.form.FilteringSelect">
 115                                                         <option value="1">foo</option>
 116                                                         <option value="2">bar</option>
 117                                                         <option value="3">baz</option>
 118                                                 </select>
 119                                                 Here's some text that comes AFTER the combo box.
 120                                         </div>
 121                                         <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;" tabindex="0">
 122                                                 inner right
 123                                         </div>
 124                                 </div>
 125                         </div>
 126                         <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #b39b86; margin: 5px;" tabindex="0"      >
 127                                 bottom bar
 128                         </div>
 129                 </div>
 130         </div>
 131 </div>
 132
 133 <p>Goofy spiral layout.  Match of source code order to tab order can not be achieved with this type of layout.</p>
 134 <div dojoType="dijit.layout.LayoutContainer"
 135         style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;"
 136 >
 137         <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #663333; color: white; width: 100px;">
 138                 outer left
 139         </div>
 140         <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #333366; color: white; height: 50px;">
 141                 outer top
 142         </div>
 143         <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #663333; color: white; width: 100px;">
 144                 outer right
 145         </div>
 146         <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #333366; color: white; height: 50px;">
 147                 outer bottom
 148         </div>
 149         <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color: #99CC99; width: 100px;">
 150                 inner left
 151         </div>
 152         <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color: #999966; height: 50px;">
 153                 inner top
 154         </div>
 155         <div dojoType="dijit.layout.ContentPane" layoutAlign="right" style="background-color: #99CC99; width: 100px;">
 156                 inner right
 157         </div>
 158         <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom" style="background-color: #999966; height: 50px;">
 159                 inner bottom
 160         </div>
 161         <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="padding: 10px;">
 162                 main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
 163                 (to check we're copying children around properly).<br />
 164                 <select dojoType="dijit.form.FilteringSelect">
 165                         <option value="1">foo</option>
 166                         <option value="2">bar</option>
 167                         <option value="3">baz</option>
 168                 </select>
 169                 Here's some text that comes AFTER the combo box.
 170         </div>
 171 </div>
 172
 173 </body>
 174 </html>