diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/layout/test_SplitContainer.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-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_SplitContainer.html')
| -rw-r--r-- | includes/js/dijit/tests/layout/test_SplitContainer.html | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/test_SplitContainer.html b/includes/js/dijit/tests/layout/test_SplitContainer.html new file mode 100644 index 0000000..f71d2dd --- /dev/null +++ b/includes/js/dijit/tests/layout/test_SplitContainer.html @@ -0,0 +1,116 @@ +<!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> |