diff options
author | 2008-11-13 09:49:11 +0000 | |
---|---|---|
committer | 2008-11-13 09:49:11 +0000 | |
commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/layout/test_BorderContainer_experimental.html | |
parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
download | scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
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, 253 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html b/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html new file mode 100644 index 0000000..46483d9 --- /dev/null +++ b/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html @@ -0,0 +1,253 @@ +<!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> |