+++ /dev/null
-<!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>
projects / eow / blobdiff