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.
59 lines
1.6 KiB
59 lines
1.6 KiB
2 years ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>SplitContainer Widget Demo</title>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var djConfig = {isDebug: true };
|
||
|
|
</script>
|
||
|
|
<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>
|
||
|
|
</head>
|
||
|
|
<body style="padding: 50px;">
|
||
|
|
|
||
|
|
<p>HTML before</p>
|
||
|
|
<p>HTML before</p>
|
||
|
|
<p>HTML before</p>
|
||
|
|
|
||
|
|
<div dojoType="SplitContainer"
|
||
|
|
orientation="vertical"
|
||
|
|
sizerWidth="30"
|
||
|
|
activeSizing="false"
|
||
|
|
style="border: 2px solid black; float: left; margin-right: 30px; width: 400px; height: 300px;"
|
||
|
|
>
|
||
|
|
<div dojoType="ContentPane" sizeMin="10" sizeShare="50">
|
||
|
|
this box has three split panes
|
||
|
|
</div>
|
||
|
|
<div dojoType="ContentPane" sizeMin="20" sizeShare="50" style="background-color: yellow; border: 3px solid purple;">
|
||
|
|
in vertical mode
|
||
|
|
</div>
|
||
|
|
<div dojoType="ContentPane" sizeMin="10" sizeShare="50">
|
||
|
|
without active resizing
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="SplitContainer"
|
||
|
|
orientation="horizontal"
|
||
|
|
sizerWidth="5"
|
||
|
|
activeSizing="true"
|
||
|
|
style="border: 2px solid black; float: left; width: 400px; height: 300px;"
|
||
|
|
>
|
||
|
|
<div dojoType="ContentPane" sizeMin="20" sizeShare="20">
|
||
|
|
this box has two horizontal panes
|
||
|
|
</div>
|
||
|
|
<div dojoType="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>
|
||
|
|
<p>HTML after</p>
|
||
|
|
<p>HTML after</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|