<!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>