<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>SplitContainer Widget Demo</title> <style type="text/css"> @import "../../../dojo/resources/dojo.css"; @import "../css/dijitTests.css"; .dojoContentPane { padding:1em; } </style> <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"); // these exist inside our href splitcontainer dojo.require("dijit.form.Button"); dojo.require("dijit.form.ComboBox"); var programaticExample = function(){ var rootNode = dojo.byId("holderNode"); // add two children var pane1 = rootNode.appendChild(document.createElement('div')); var pane2 = rootNode.appendChild(document.createElement('div')); var pane3 = rootNode.appendChild(document.createElement('div')); // set the content. can use xhrGet, also pane1.innerHTML = "Pane one test"; pane2.innerHTML = "Pane two test"; // should use css, but this works: dojo.style(rootNode,"height","150px"); dojo.style(rootNode,"border","1px solid #333"); // make them contentpanes var cp1 = new dijit.layout.ContentPane({ sizeShare:20 },pane1); var cp2 = new dijit.layout.ContentPane({ sizeShare:30 },pane2); var cp3 = new dijit.layout.ContentPane({ href: "doc0.html", sizeShare:30 },pane3).startup(); // init the splitcontainer var split = new dijit.layout.SplitContainer({ orientation:"horizontal", sizerWidth:7 },rootNode).startup(); }; dojo.addOnLoad(programaticExample); </script> </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> <h3>Programatic Example:</h3> <div id="holderNode"></div> </body> </html>