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