<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Demo</title>
<script type="text/javascript">
var djConfig = {isDebug: true};
//djConfig.debugAtAllCosts = true;
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.widget.LinkPane");
dojo.require("dojo.widget.SplitContainer");
dojo.require("dojo.widget.ColorPalette");
dojo.require("dojo.widget.TabContainer");
dojo.require("dojo.widget.Tree");
dojo.hostenv.writeIncludes();
</script>
<style>
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
overflow: hidden; /* erase window level scrollbars */
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.dojoSplitPane{
margin: 5px;
}
#rightPane {
margin: 0;
}
</style>
</head>
<body>
<div dojoType="LayoutContainer"
layoutChildPriority='top-bottom'
style="width: 100%; height: 100%;">
<div dojoType="ContentPane" layoutAlign="top" style="background-color: #274383; color: white;">
top bar
</div>
<div dojoType="ContentPane" layoutAlign="bottom" style="background-color: #274383; color: white;">
bottom bar
</div>
<div dojoType="SplitContainer"
orientation="horizontal"
sizerWidth="5"
activeSizing="0"
layoutAlign="client"
>
<div dojoType="Tree" publishSelectionTopic="treeSelected" toggle="fade"
sizeMin="20" sizeShare="20">
<div dojoType="TreeNode" title="Item 1">
<div dojoType="TreeNode" title="Item 1.1"><br/></div>
<div dojoType="TreeNode" title="Item 1.2">
<div dojoType="TreeNode" title="Item 1.2.1"></div>
<div dojoType="TreeNode" title="Item 1.2.2"></div>
</div>
<div dojoType="TreeNode" title="Item 1.3">
<div dojoType="TreeNode" title="Item 1.3.1"></div>
<div dojoType="TreeNode" title="Item 1.3.2"></div>
</div>
<div dojoType="TreeNode" title="Item 1.4">
<div dojoType="TreeNode" title="Item 1.4.1"></div>
</div>
</div>
</div>
<div dojoType="SplitContainer"
id="rightPane"
orientation="vertical"
sizerWidth="5"
activeSizing="0"
sizeMin="50" sizeShare="80"
>
<div id="mainTabContainer" dojoType="TabContainer" sizeMin="20" sizeShare="70">
<a id="tab1" dojoType="LinkPane" href="tab1.html">Tab 1</a>
<a id="tab2" dojoType="LinkPane" href="tab2.html">Tab 2</a>
</div>
<div dojoType="ContentPane" sizeMin="20" sizeShare="30">
This is just a test of the various containers nested inside each other.
</div>
</div>
</div>
</div>
</body>
</html>