diff options
Diffstat (limited to 'includes/js/dijit/tests/layout/test_BorderContainer_experimental.html')
-rw-r--r-- | includes/js/dijit/tests/layout/test_BorderContainer_experimental.html | 253 |
1 files changed, 0 insertions, 253 deletions
diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html b/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html deleted file mode 100644 index 46483d9..0000000 --- a/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html +++ /dev/null @@ -1,253 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - - <title>BorderContainer Experiments | The Dojo Toolkit</title> - - <link rel="stylesheet" href="../../themes/tundra/tundra.css" /> - <style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../css/dijitTests.css"; - #pane1 { background-color:red; - } - #pane2{ - background-color:green; - } - #pane3 { - background-color:blue; - } - #pane0 { - background-color:#ededed; - } - .wrapper { padding:25px; } - .bc { margin:10px; border:2px solid #ededed; } - </style> - - <script type="text/javascript" src="../../../dojo/dojo.js" - djConfig="parseOnLoad:true, isDebug:true"></script> - - <script type="text/javascript"> - dojo.require("dijit.form.Button"); - dojo.require("dijit.layout.ContentPane"); - dojo.require("dijit.layout.BorderContainer"); - dojo.declare("my.BorderContainer",dijit.layout.BorderContainer,{ - - opts: { - // single pane view - "a":{ - panes: [ - { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"100%" } }, - { id: "pane1", hidden:true }, - { id: "pane2", hidden:true }, - { id: "pane3", hidden:true } - ] - }, - // top / bottom view - "ah":{ - panes: [ - { id: "pane0", sizeable:false, region:"center", style: { width:"100%", height:"50%" } }, - { id: "pane1", sizeable:true, region:"bottom", style: { width:"100%", height:"50%" } }, - { id: "pane2", hidden:true }, - { id: "pane3", hidden:true } - ] - }, - // left / right view - "av":{ - panes: [ - { id: "pane0", sizeable:true, region:"left", style: { width:"50%", height:"100%" } }, - { id: "pane1", sizeable:false, region:"center", style: { width:"50%", height:"100%" } }, - { id: "pane2", hidden:true }, - { id: "pane3", hidden:true } - ] - } - - }, - - _clearSplitters: function(){ - // cleanup all splitters on the page - dojo.query(".dijitSplitter",this.domNode).forEach(function(n){ - dijit.byNode(n).destroy(); - }); - dojo.query(".dijitSplitterCover").forEach(function(n){ - dojo._destroyElement(n); - }) - delete this._splitters; - this._splitters = {}; - }, - - setLayoutENUM: function(lay){ - // set the layout to a predefined setup - if(this._layoutSetting != lay){ - - this._layoutSetting = lay; - var struct = this.opts[lay] || false; - this._clearSplitters(); - - dojo.forEach(struct.panes,function(pane,i){ - // setup each pane - var d = dijit.byId(pane.id); - d.region = pane.region || "center"; - d.splitter = pane.sizeable; - if(pane.minSize){ d.minSize = pane.minSize; } - if(pane.maxSize){ d.maxSize = pane.maxSize; } - if(pane.hidden){ - // reset this widget to our hidden holder node - this.extractChild(d,dojo.byId("holder")); - d.splitter = null; - d.region = null; - d.maxSize = null; - d.minSize = null; - }else{ - if(pane.style){ - // object setter via style only in trunk: - dojo.style(d.domNode,pane.style); - } - this.addChild(d,i); - } - },this); - } - this.layout(); - }, - - extractChild: function(/*Widget*/ child, /* DomNode */node){ - // a non-destructive cleanup for the bordercontainer. - // cleanup a widget, and append it's domNode to some - // other node in the dom - var region = child.region; - var splitter = this._splitters[region]; - if(splitter){ - dijit.byNode(splitter).destroy(); - delete this._splitters[region]; - } - delete this["_"+region]; - node.appendChild(child.domNode); - if(this._started){ - this._layoutChildren(); - } - return child.domNode; - } - }); - - var open = false; - - dojo.addOnLoad(function(){ - // make buttons - dojo.forEach(["a","av","ah"],function(n){ - - var but = new dijit.form.Button({ - label: "Set "+n, - onClick: function(){ - console.log(n); - layout.setLayoutENUM(n); - } - }); - dojo.byId("buttons").appendChild(but.domNode); - but.startup(); - }) - - }); - </script> - - </head> - <body class="tundra"> - - <h1>This is a test</h1> - <p>This is only a test. An experiment in dynamically altering a BorderContainer's layout - (a seemingly unsupported feature just yet). It Demonstrates how to programatically alter/animate - the size of non-center regions though, and several simple layout configurations - </p> - - <div> - <h3>Layouts:</h3> - <div id="buttons"></div> - </div> - - <div jsId="layout" id="container" dojoType="my.BorderContainer" style="width:600px; height:300px; border:3px solid #333;"> - <div dojoType="dijit.layout.ContentPane" region="center" id="pane0"> - pane0 - </div> - </div> - - <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> - <div dojoType="dijit.layout.ContentPane" region="center"> - Sinlge pane - l1 - </div> - </div> - - <div class="wrapper"> - <h3>two panes, vertical split:</h3> - - - <div class="bc" id="animBC" dojoType="dijit.layout.BorderContainer" style="height:200px"> - <div dojoType="dijit.layout.ContentPane" id="sizing1" style="background-color:red" region="left" splitter="true"> - Sinlge pane - left - </div> - <div dojoType="dijit.layout.ContentPane" region="center"> - Sinlge pane - center - <button dojoType="dijit.form.Button"> - Size Me - <script type="dojo/method" event="onClick"> - var n = dijit.byId("sizing1").domNode; - dojo.animateProperty({ - node:n, - duration:1000, - properties: { width: { end: (open ? "100" : "400"), unit:"px" } }, - onEnd: function(){ - open = !open; - dijit.byId("animBC").layout(); - } - }).play(1); - </script> - </button> - </div> - </div> - - <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> - <div dojoType="dijit.layout.ContentPane" region="center" splitter="true"> - Sinlge pane - center (splitter) (this is unsupported, and does not work) - </div> - <div dojoType="dijit.layout.ContentPane" region="right"> - Sinlge pane - right (no splitter) - </div> - </div> - - <div class="bc" dojoType="dijit.layout.BorderContainer" style="height:200px"> - <div dojoType="dijit.layout.ContentPane" region="center"> - Sinlge pane - center (no splitter) - </div> - <div dojoType="dijit.layout.ContentPane" region="right" splitter="true"> - Sinlge pane - right (splitter) - </div> - </div> - </div> - - <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;"> - <div dojoType="dijit.layout.ContentPane" region="top" splitter="true"> - Sinlge pane - top (splitter) - - </div> - <div dojoType="dijit.layout.ContentPane" region="center"> - Sinlge pane - center - </div> - </div> - - <div class="bc" dojoType="dijit.layout.BorderContainer" style="width:200px; height:400px;"> - <div dojoType="dijit.layout.ContentPane" region="center"> - Sinlge pane - center - </div> - <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true"> - Single Pane Bottom (splitter) - </div> - <div dojoType="dijit.layout.ContentPane" region="top" splitter="true"> - Single Pane Top (splitter) - </div> - </div> - - <div id="holder" style="visibility:hidden"> - <div dojoType="dijit.layout.ContentPane" id="pane1">pane 1</div> - <div dojoType="dijit.layout.ContentPane" id="pane2">pane 2</div> - <div dojoType="dijit.layout.ContentPane" id="pane3">pane 3</div> - </div> - - </body> -</html> |