| New file |
|---|
| 0,0 → 1,77 |
|---|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>SplitContainer Widget Demo</title> |
| |
| <script type="text/javascript" src="../../../dojo/dojo.js" |
| djConfig="isDebug: true, parseOnLoad: true"></script> |
| <script type="text/javascript" src="../_testCommon.js"></script> |
| |
| <script type="text/javascript"> |
| dojo.require("dijit.layout.SplitContainer"); |
| dojo.require("dijit.layout.ContentPane"); |
| dojo.require("dojo.parser"); // scan page for widgets and instantiate them |
| </script> |
| <style type="text/css"> |
| @import "../../../dojo/resources/dojo.css"; |
| @import "../css/dijitTests.css"; |
| .dojoContentPane { |
| padding:1em; |
| } |
| </style> |
| </head> |
| <body> |
| <h1 class="testTitle">Dijit Split Container Test</h1> |
| <p>HTML before</p> |
| |
| <div dojoType="dijit.layout.SplitContainer" |
| orientation="vertical" |
| sizerWidth="7" |
| activeSizing="false" |
| style="border: 1px solid #bfbfbf; float: left; margin-right: 30px; width: 400px; height: 300px;" |
| > |
| <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50"> |
| this box has three split panes |
| </div> |
| <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="50" |
| style="background-color: yellow; border: 3px solid purple;"> |
| in vertical mode |
| </div> |
| <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50"> |
| without active resizing |
| </div> |
| </div> |
| |
| <div dojoType="dijit.layout.SplitContainer" |
| orientation="horizontal" |
| sizerWidth="7" |
| activeSizing="true" |
| style="border: 1px solid #bfbfbf; float: left; width: 400px; height: 300px;"> |
| <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20"> |
| this box has two horizontal panes |
| </div> |
| <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50"> |
| with active resizing, a smaller sizer, different starting sizes and minimum sizes |
| </div> |
| </div> |
| |
| <p style="clear: both;">HTML after</p> |
| |
| the following splitter contains two iframes, see whether the resizer works ok in this situation |
| <div dojoType="dijit.layout.SplitContainer" |
| orientation="horizontal" |
| sizerWidth="5" |
| activeSizing="false" |
| style="border: 2px solid black; float: left; width: 100%; height: 300px;" |
| > |
| <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20"> |
| <iframe style="width: 100%; height: 100%"></iframe> |
| </div> |
| <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50"> |
| <iframe style="width: 100%; height: 100%"></iframe> |
| </div> |
| </div> |
| |
| </body> |
| </html> |