You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.7 KiB
91 lines
2.7 KiB
2 years ago
|
<!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>
|