dijit.SplitContainer
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<body class="claro">
<div>
<button data-dojo-type="dijit.form.Button" id="btnHide">Hide Right Pane</button>
<button data-dojo-type="dijit.form.Button" id="btnToggle">Toggle Right Pane</button>
<div data-dojo-type="dijit.layout.SplitContainer" dojo-data-props="orientation:'horizontal',sizerWidth:7" style="background-color:#DDDDDD;width:300px;height:200px;" id="splitContainer">
<div data-dojo-type="dijit.layout.ContentPane" id="top
">Left Pane</div>
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane">
<div data-dojo-type="dijit.layout.ContentPane" id="pane1">Right Pane 1</div>
<div data-dojo-type="dijit.layout.ContentPane" id="pane2" class="dijitHidden">Right Pane 2</div>
</div>
</div>
</div>
</div>
</body>
JavaScript
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.ContentPane");
dojo.ready(function () {
var splitContainer = dijit.byId("splitContainer");
var leftPane = dijit.byId("leftPane");
var rightPane = dijit.byId("rightPane");
var pane1 = dijit.byId("pane1");
var pane2 = dijit.byId("pane2");
rightPane.isVisible = true;
// Toggle Right Pane
dojo.connect(dijit.byId("btnToggle"), "onClick", function () {
var hiddenPane = dojo.hasClass(pane1.domNode, "dijitHidden") ? pane1 : pane2;
var visiblePane = hiddenPane === pane1 ? pane2 : pane1;
dojo.replaceClass(hiddenPane.domNode, "dijitVisible", "dijitHidden");
dojo.replaceClass(visiblePane.domNode, "dijitHidden", "dijitVisible");
hiddenPane.onHide && hiddenPane.onHide();
visiblePane.onShow && visiblePane.onShow();
});
// Show/Hide Right Pane
dojo.connect(dijit.byId("btnHide"), "onClick", function () {
if (rightPane.isVisible) {
splitContainer.removeChild(rightPane);
dijit.byId("btnHide").set("label", "Show Right Pane");
rightPane.isVisible = false;
return;
}
splitContainer.addChild(rightPane);
dijit.byId("btnHide").set("label", "Hide Right Pane");
rightPane.isVisible = true;
});
dojo.connect(pane1, "onShow", function () {
console.log("pane1.onShow")
});
dojo.connect(pane1, "onHide", function () {
console.log("pane1.onHide")
});
});