dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
140 lines (120 loc) • 4.73 kB
HTML
<html lang="en">
<head>
<title>SplitContainer Widget Demo</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
.dojoContentPane {
padding:1em;
}
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<!-- only needed for alternate theme testing: do NOT use in your code! -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
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.ready(programaticExample);
// for testing SplitContainer.addChild()
ctr = 1;
function addChild(parentId, position){
dijit.byId(parentId).addChild(new dijit.layout.ContentPane({
id: "ContentPane" + ctr,
innerHTML: "added child #" + ctr++
}), position);
}
</script>
</head>
<body role="main">
<h1 class="testTitle">Dijit Split Container Test - DEPRECATED!</h1>
<p><strong>dijit.layout.SplitContainer is deprecated use
BorderContainer with splitter instead -- will be removed in version: 2</strong></p>
<p>HTML before</p>
<div dojoType="dijit.layout.SplitContainer"
id="split1"
orientation="vertical"
sizerWidth="7"
activeSizing="false"
style="border: 1px solid #bfbfbf; 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>
<button onclick="addChild('split1');">add child at end</button>
<button onclick="addChild('split1', 'first');">add child at beginning</button>
<button onclick="addChild('split1', 3);">addChild(child, 3)</button>
<button onclick="addChild('split1', dijit.byId('split1').getChildren().length-1);">addChild(child, getChildren().length-1)</button>
<br><br>
<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%" title="iframe"></iframe>
</div>
<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
<iframe style="width: 100%; height: 100%" title="iframe2"></iframe>
</div>
</div>
<h3>Programatic Example:</h3>
<div id="holderNode"></div>
</body>
</html>