git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/layout/test_SplitContainer.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>SplitContainer Widget Demo</title>
   6
   7         <style type="text/css">
   8                 @import "../../../dojo/resources/dojo.css";
   9                 @import "../css/dijitTests.css";
  10                 .dojoContentPane {
  11                         padding:1em;
  12                 }
  13         </style>
  14
  15         <script type="text/javascript" src="../../../dojo/dojo.js"
  16                 djConfig="isDebug: true, parseOnLoad: true"></script>
  17         <script type="text/javascript" src="../_testCommon.js"></script>
  18
  19         <script type="text/javascript">
  20                 dojo.require("dijit.layout.SplitContainer");
  21                 dojo.require("dijit.layout.ContentPane");
  22
  23                 // these exist inside our href splitcontainer
  24                 dojo.require("dijit.form.Button");
  25                 dojo.require("dijit.form.ComboBox");
  26                 var programaticExample = function(){
  27
  28                         var rootNode = dojo.byId("holderNode");
  29                         // add two children
  30                         var pane1 = rootNode.appendChild(document.createElement('div'));
  31                         var pane2 = rootNode.appendChild(document.createElement('div'));
  32                         var pane3 = rootNode.appendChild(document.createElement('div'));
  33
  34                         // set the content. can use xhrGet, also
  35                         pane1.innerHTML = "Pane one test"; pane2.innerHTML = "Pane two test";
  36
  37                         // should use css, but this works:
  38                         dojo.style(rootNode,"height","150px");
  39                         dojo.style(rootNode,"border","1px solid #333");
  40
  41                         // make them contentpanes
  42                         var cp1 = new dijit.layout.ContentPane({ sizeShare:20 },pane1);
  43                         var cp2 = new dijit.layout.ContentPane({ sizeShare:30 },pane2);
  44                         var cp3 = new dijit.layout.ContentPane({
  45                                 href: "doc0.html",
  46                                 sizeShare:30
  47                         },pane3).startup();
  48
  49                         // init the splitcontainer
  50                         var split = new dijit.layout.SplitContainer({
  51                                 orientation:"horizontal",
  52                                 sizerWidth:7
  53                         },rootNode).startup();
  54
  55                 };
  56                 dojo.addOnLoad(programaticExample);
  57
  58         </script>
  59 </head>
  60 <body>
  61         <h1 class="testTitle">Dijit Split Container Test</h1>
  62         <p>HTML before</p>
  63
  64         <div dojoType="dijit.layout.SplitContainer"
  65                 orientation="vertical"
  66                 sizerWidth="7"
  67                 activeSizing="false"
  68                 style="border: 1px solid #bfbfbf; float: left; margin-right: 30px;  width: 400px; height: 300px;"
  69         >
  70                 <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50">
  71                         this box has three split panes
  72                 </div>
  73                 <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="50"
  74                         style="background-color: yellow; border: 3px solid purple;">
  75                         in vertical mode
  76                 </div>
  77                 <div dojoType="dijit.layout.ContentPane" sizeMin="10" sizeShare="50">
  78                         without active resizing
  79                 </div>
  80         </div>
  81
  82         <div dojoType="dijit.layout.SplitContainer"
  83                 orientation="horizontal"
  84                 sizerWidth="7"
  85                 activeSizing="true"
  86                 style="border: 1px solid #bfbfbf; float: left; width: 400px; height: 300px;">
  87                 <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
  88                         this box has two horizontal panes
  89                 </div>
  90                 <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
  91                         with active resizing, a smaller sizer, different starting sizes and minimum sizes
  92                 </div>
  93         </div>
  94
  95         <p style="clear: both;">HTML after</p>
  96
  97 the following splitter contains two iframes, see whether the resizer works ok in this situation
  98 <div dojoType="dijit.layout.SplitContainer"
  99         orientation="horizontal"
 100         sizerWidth="5"
 101         activeSizing="false"
 102         style="border: 2px solid black; float: left; width: 100%; height: 300px;"
 103 >
 104         <div dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="20">
 105                 <iframe style="width: 100%; height: 100%"></iframe>
 106         </div>
 107         <div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
 108                 <iframe style="width: 100%; height: 100%"></iframe>
 109         </div>
 110 </div>
 111
 112 <h3>Programatic Example:</h3>
 113 <div id="holderNode"></div>
 114
 115 </body>
 116 </html>