254 lines
7.5 KiB
HTML
254 lines
7.5 KiB
HTML
|
<!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>
|