aboutsummaryrefslogtreecommitdiff
path: root/includes/js/dijit/tests/layout/test_BorderContainer_experimental.html
diff options
context:
space:
mode:
Diffstat (limited to 'includes/js/dijit/tests/layout/test_BorderContainer_experimental.html')
-rw-r--r--includes/js/dijit/tests/layout/test_BorderContainer_experimental.html253
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-18 23:43:48 +0000