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