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.
145 lines
3.4 KiB
145 lines
3.4 KiB
2 years ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>Pane Widgets 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.FloatingPane");
|
||
|
|
dojo.require("dojo.widget.ContentPane");
|
||
|
|
dojo.require("dojo.widget.LayoutContainer");
|
||
|
|
dojo.require("dojo.widget.SplitContainer");
|
||
|
|
dojo.require("dojo.widget.ResizeHandle");
|
||
|
|
dojo.require("dojo.widget.Tree");
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
html, body {
|
||
|
|
/* apparently important for floating pane resizing performance */
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.statusBar {
|
||
|
|
background-color: ThreeDFace;
|
||
|
|
height: 28px;
|
||
|
|
padding: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.statusPanel {
|
||
|
|
background-color: ThreeDFace;
|
||
|
|
border: 1px solid;
|
||
|
|
border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow;
|
||
|
|
margin: 1px;
|
||
|
|
padding: 2px 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dojoFloatingPaneClient {
|
||
|
|
margin: 0 !important;
|
||
|
|
padding: 0 !important;
|
||
|
|
border: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body .dojoTree {
|
||
|
|
margin: 4px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainClient {
|
||
|
|
border: 1px solid;
|
||
|
|
border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow;
|
||
|
|
margin: 2px 2px 0px 2px;
|
||
|
|
background-color: ThreeDFace;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div dojoType="FloatingPane"
|
||
|
|
widgetId="testWindow"
|
||
|
|
title="Inlook Express"
|
||
|
|
constrainToContainer="1"
|
||
|
|
style="width: 500px; height: 300px; left: 100px; top: 100px;"
|
||
|
|
resizable="true"
|
||
|
|
>
|
||
|
|
<div dojoType="SplitContainer"
|
||
|
|
orientation="horizontal"
|
||
|
|
sizerWidth="5"
|
||
|
|
activeSizing="1"
|
||
|
|
layoutAlign="client"
|
||
|
|
debugName="split pane 1"
|
||
|
|
class="mainClient"
|
||
|
|
minHeight="100"
|
||
|
|
>
|
||
|
|
<div dojoType="Tree" toggle="fade"
|
||
|
|
sizeMin="60" sizeShare="1">
|
||
|
|
<div dojoType="TreeNode" title="Mail Account">
|
||
|
|
<div dojoType="TreeNode" title="Inbox"></div>
|
||
|
|
<div dojoType="TreeNode" title="Sent Mail"></div>
|
||
|
|
<div dojoType="TreeNode" title="Deleted"></div>
|
||
|
|
<div dojoType="TreeNode" title="Saved Mail">
|
||
|
|
<div dojoType="TreeNode" title="Friends">
|
||
|
|
<div dojoType="TreeNode" title="Bob"></div>
|
||
|
|
<div dojoType="TreeNode" title="Jack"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="TreeNode" title="Work"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="SplitContainer"
|
||
|
|
orientation="vertical"
|
||
|
|
sizerWidth="5"
|
||
|
|
activeSizing="1"
|
||
|
|
layoutAlign="client"
|
||
|
|
debugName="split pane 2"
|
||
|
|
sizeMin="100" sizeShare="3"
|
||
|
|
>
|
||
|
|
|
||
|
|
<div dojoType="ContentPane" sizeMin="30" sizeShare="30">
|
||
|
|
message list here
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="LayoutContainer"
|
||
|
|
sizeMin="60" sizeShare="70"
|
||
|
|
style="margin: 0; padding: 0;"
|
||
|
|
>
|
||
|
|
|
||
|
|
<div dojoType="ContentPane" layoutAlign="top" style="background-color: #b39b86; padding: 8px;">
|
||
|
|
message headers<br />go here
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">
|
||
|
|
main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div> <!-- end vertical split pane -->
|
||
|
|
</div> <!-- end horizontal split pane -->
|
||
|
|
|
||
|
|
<div dojoType="LayoutContainer" layoutAlign="bottom" class="statusBar">
|
||
|
|
|
||
|
|
<div dojoType="ContentPane" layoutAlign="left" class="statusPanel">
|
||
|
|
panel 1
|
||
|
|
</div>
|
||
|
|
<div dojoType="ContentPane" layoutAlign="left" class="statusPanel">
|
||
|
|
panel 2
|
||
|
|
</div>
|
||
|
|
<div dojoType="ContentPane" layoutAlign="client" class="statusPanel" style="padding-right: 0px; z-index: 1;" minWidth="100">
|
||
|
|
panel 3
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|