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.
61 lines
1.8 KiB
61 lines
1.8 KiB
2 years ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Split Container Demo</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../dojo.js"></script>
|
||
|
|
<script language="JavaScript" type="text/javascript">
|
||
|
|
dojo.require("dojo.widget.SplitContainer");
|
||
|
|
dojo.require("dojo.widget.ContentPane");
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
body .dojoSplitContainerSizerV, body .dojoSplitContainerSizerH {
|
||
|
|
background: blue;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div dojoType="SplitContainer"
|
||
|
|
orientation="horizontal"
|
||
|
|
sizerWidth="10"
|
||
|
|
activeSizing="false"
|
||
|
|
style="width: 100%; height: 100%; background: #eeeeee; padding: 10px;"
|
||
|
|
>
|
||
|
|
<div dojoType="ContentPane" sizeShare="20"
|
||
|
|
style="overflow: auto;">
|
||
|
|
I'm a content pane, and I'm the first child of the SplitContainer, so I appear on the left.
|
||
|
|
My initial size is 20%, but if you adjust it and come back to the demo,
|
||
|
|
my parent (the SplitContainer) will remember the size you set.
|
||
|
|
On my right is a split container. (The parent split container contains a child split container.)
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="SplitContainer"
|
||
|
|
id="rightPane"
|
||
|
|
orientation="vertical"
|
||
|
|
sizerWidth="10"
|
||
|
|
activeSizing="false"
|
||
|
|
sizeShare="60">
|
||
|
|
<div dojoType="ContentPane" sizeShare="50" sizeMin="20" style="overflow:auto">
|
||
|
|
This is the top part of the inner split container.
|
||
|
|
</div>
|
||
|
|
<div dojoType="ContentPane" sizeShare="50">
|
||
|
|
...and this is the bottom.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="ContentPane" sizeShare="20">
|
||
|
|
I'm another content pane, on the right.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|