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

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3     <head>
   4
   5                 <title>BorderContainer Experiments | The Dojo Toolkit</title>
   6
   7                 <link rel="stylesheet" href="../../themes/tundra/tundra.css" />
   8                 <style type="text/css">
   9                         @import "../../../dojo/resources/dojo.css";
  10                         @import "../css/dijitTests.css";
  11                         #pane1 { background-color:red;
  12                         }
  13                         #pane2{
  14                                 background-color:green;
  15                         }
  16                         #pane3 {
  17                                 background-color:blue;
  18                         }
  19                         #pane0 {
  20                                 background-color:#ededed;
  21                         }
  22                         .wrapper { padding:25px; }
  23                         .bc { margin:10px; border:2px solid #ededed; }
  24                 </style>
  25
  26                 <script type="text/javascript" src="../../../dojo/dojo.js"
  27                                 djConfig="parseOnLoad:true, isDebug:true"></script>
  28
  29                 <script type="text/javascript">
  30                         dojo.require("dijit.form.Button");
  31                         dojo.require("dijit.layout.ContentPane");
  32                         dojo.require("dijit.layout.BorderContainer");
  33                         dojo.declare("my.BorderContainer",dijit.layout.BorderContainer,{
  34
  35                                 opts: {
  36                                         // single pane view
  37                                         "a":{
  38                                                 panes: [
  39                                                         { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"100%" } },
  40                                                         { id: "pane1", hidden:true },
  41                                                         { id: "pane2", hidden:true },
  42                                                         { id: "pane3", hidden:true }
  43                                                 ]
  44                                         },
  45                                         // top / bottom view
  46                                         "ah":{
  47                                                 panes: [
  48                                                         { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"50%" } },
  49                                                         { id: "pane1", sizeable:true, region:"bottom", style: { width:"100%", height:"50%" } },
  50                                                         { id: "pane2", hidden:true },
  51                                                         { id: "pane3", hidden:true }
  52                                                 ]
  53                                         },
  54                                         // left / right view
  55                                         "av":{
  56                                                 panes: [
  57                                                         { id: "pane0", sizeable:true, region:"left", style: { width:"50%", height:"100%" } },
  58                                                         { id: "pane1", sizeable:false, region:"center", style: { width:"50%", height:"100%" } },
  59                                                         { id: "pane2", hidden:true },
  60                                                         { id: "pane3", hidden:true }
  61                                                 ]
  62                                         }
  63
  64                                 },
  65
  66                                 _clearSplitters: function(){
  67                                         // cleanup all splitters on the page
  68                                         dojo.query(".dijitSplitter",this.domNode).forEach(function(n){
  69                                                 dijit.byNode(n).destroy();
  70                                         });
  71                                         dojo.query(".dijitSplitterCover").forEach(function(n){
  72                                                 dojo._destroyElement(n);
  73                                         })
  74                                         delete this._splitters;
  75                                         this._splitters = {};
  76                                 },
  77
  78                                 setLayoutENUM: function(lay){
  79                                         // set the layout to a predefined setup
  80                                         if(this._layoutSetting != lay){
  81
  82                                                 this._layoutSetting = lay;
  83                                                 var struct = this.opts[lay] || false;
  84                                                 this._clearSplitters();
  85
  86                                                 dojo.forEach(struct.panes,function(pane,i){
  87                                                         // setup each pane
  88                                                         var d = dijit.byId(pane.id);
  89                                                         d.region = pane.region || "center";
  90                                                         d.splitter = pane.sizeable;
  91                                                         if(pane.minSize){ d.minSize = pane.minSize; }
  92                                                         if(pane.maxSize){ d.maxSize = pane.maxSize; }
  93                                                         if(pane.hidden){
  94                                                                 // reset this widget to our hidden holder node
  95                                                                 this.extractChild(d,dojo.byId("holder"));
  96                                                                 d.splitter = null;
  97                                                                 d.region = null;
  98                                                                 d.maxSize = null;
  99                                                                 d.minSize = null;
 100                                                         }else{
 101                                                                 if(pane.style){
 102                                                                         // object setter via style only in trunk:
 103                                                                         dojo.style(d.domNode,pane.style);
 104                                                                 }
 105                                                                 this.addChild(d,i);
 106                                                         }
 107                                                 },this);
 108                                         }
 109                                         this.layout();
 110                                 },
 111
 112                                 extractChild: function(/*Widget*/ child, /* DomNode */node){
 113                                         // a non-destructive cleanup for the bordercontainer.
 114                                         // cleanup a widget, and append it's domNode to some
 115                                         // other node in the dom
 116                                         var region = child.region;
 117                                         var splitter = this._splitters[region];
 118                                         if(splitter){
 119                                                 dijit.byNode(splitter).destroy();
 120                                                 delete this._splitters[region];
 121                                         }
 122                                         delete this["_"+region];
 123                                         node.appendChild(child.domNode);
 124                                         if(this._started){
 125                                                 this._layoutChildren();
 126                                         }
 127                                         return child.domNode;
 128                                 }
 129                         });
 130
 131                         var open = false;
 132
 133                         dojo.addOnLoad(function(){
 134                                 // make buttons
 135                                 dojo.forEach(["a","av","ah"],function(n){
 136
 137                                         var but = new dijit.form.Button({
 138                                                 label: "Set "+n,
 139                                                 onClick: function(){
 140                                                         console.log(n);
 141                                                         layout.setLayoutENUM(n);
 142                                                 }
 143                                         });
 144                                         dojo.byId("buttons").appendChild(but.domNode);
 145                                         but.startup();
 146                                 })
 147
 148                         });
 149                 </script>
 150
 151     </head>
 152     <body class="tundra">
 153
 154                 <h1>This is a test</h1>
 155                 <p>This is only a test. An experiment in dynamically altering a BorderContainer's layout
 156                 (a seemingly unsupported feature just yet). It Demonstrates how to programatically alter/animate
 157                 the size of non-center regions though, and several simple layout configurations
 158                 </p>
 159
 160                 <div>
 161                         <h3>Layouts:</h3>
 162                         <div id="buttons"></div>
 163                 </div>
 164
 165                 <div jsId="layout" id="container" dojoType="my.BorderContainer" style="width:600px; height:300px; border:3px solid #333;">
 166                         <div dojoType="dijit.layout.ContentPane" region="center" id="pane0">
 167                                 pane0
 168                         </div>
 169                 </div>
 170
 171                 <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px">
 172                         <div dojoType="dijit.layout.ContentPane" region="center">
 173                                 Sinlge pane - l1
 174                         </div>
 175                 </div>
 176
 177                 <div class="wrapper">
 178                         <h3>two panes, vertical split:</h3>
 179
 180
 181                         <div class="bc" id="animBC" dojoType="dijit.layout.BorderContainer" style="height:200px">
 182                                 <div dojoType="dijit.layout.ContentPane" id="sizing1" style="background-color:red" region="left" splitter="true">
 183                                         Sinlge pane - left
 184                                 </div>
 185                                 <div dojoType="dijit.layout.ContentPane"  region="center">
 186                                         Sinlge pane - center
 187                                         <button dojoType="dijit.form.Button">
 188                                         Size Me
 189                                         <script type="dojo/method" event="onClick">
 190                                                 var n = dijit.byId("sizing1").domNode;
 191                                                 dojo.animateProperty({
 192                                                         node:n,
 193                                                         duration:1000,
 194                                                         properties: { width: { end: (open ? "100" : "400"), unit:"px" } },
 195                                                         onEnd: function(){
 196                                                                 open = !open;
 197                                                                 dijit.byId("animBC").layout();
 198                                                         }
 199                                                 }).play(1);
 200                                         </script>
 201                                 </button>
 202                                 </div>
 203                         </div>
 204
 205                         <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px">
 206                                 <div dojoType="dijit.layout.ContentPane" region="center" splitter="true">
 207                                         Sinlge pane - center (splitter) (this is unsupported, and does not work)
 208                                 </div>
 209                                 <div dojoType="dijit.layout.ContentPane" region="right">
 210                                         Sinlge pane - right (no splitter)
 211                                 </div>
 212                         </div>
 213
 214                         <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px">
 215                                 <div dojoType="dijit.layout.ContentPane" region="center">
 216                                         Sinlge pane - center (no splitter)
 217                                 </div>
 218                                 <div dojoType="dijit.layout.ContentPane" region="right" splitter="true">
 219                                         Sinlge pane - right (splitter)
 220                                 </div>
 221                         </div>
 222                 </div>
 223
 224                 <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;">
 225                         <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
 226                                 Sinlge pane - top (splitter)
 227
 228                         </div>
 229                         <div dojoType="dijit.layout.ContentPane" region="center">
 230                                 Sinlge pane - center
 231                         </div>
 232                 </div>
 233
 234                 <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;">
 235                         <div dojoType="dijit.layout.ContentPane" region="center">
 236                                 Sinlge pane - center
 237                         </div>
 238                         <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true">
 239                                 Single Pane Bottom (splitter)
 240                         </div>
 241                         <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">
 242                                 Single Pane Top (splitter)
 243                         </div>
 244                 </div>
 245
 246                 <div id="holder" style="visibility:hidden">
 247                         <div dojoType="dijit.layout.ContentPane" id="pane1">pane 1</div>
 248                         <div dojoType="dijit.layout.ContentPane" id="pane2">pane 2</div>
 249                         <div dojoType="dijit.layout.ContentPane" id="pane3">pane 3</div>
 250                 </div>
 251
 252     </body>
 253 </html>