dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
268 lines (234 loc) • 8.39 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>BorderContainer Experiments | The Dojo Toolkit</title>
<script src="../boilerplate.js"></script>
<style type="text/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">
require([
"dojo/_base/array",
"dojo/_base/declare",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/parser",
"dojo/query",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(array, declare, dom, domConstruct, domStyle, parser, query,
registry, BorderContainer, Button, ContentPane){
var open = false;
declare("my.BorderContainer", 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
query(".dijitSplitter",this.domNode).forEach(function(n){
registry.byNode(n).destroy();
});
query(".dijitSplitterCover").forEach(domConstruct.destroy);
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();
array.forEach(struct.panes,function(pane,i){
// setup each pane
var d = registry.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,dom.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:
domStyle.set(d.domNode, pane.style);
}
this.addChild(d,i);
}
},this);
}
this.layout();
},
extractChild: function(/*dijit/_WidgetBase*/ 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){
registry.byNode(splitter).destroy();
delete this._splitters[region];
}
delete this["_"+region];
node.appendChild(child.domNode);
if(this._started){
this._layoutChildren();
}
return child.domNode;
}
});
parser.parse();
// make buttons
array.forEach(["a","av","ah"],function(n){
var but = new Button({
label: "Set "+n,
onClick: function(){
console.log(n);
layout.setLayoutENUM(n);
}
});
dom.byId("buttons").appendChild(but.domNode);
but.startup();
})
});
</script>
</head>
<body class="claro" role="main">
<script type="dojo/require">
fx: "dojo/_base/fx",
registry: "dijit/registry"
</script>
<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 id="container" data-dojo-id="layout" data-dojo-type="my.BorderContainer" data-dojo-props='style:"width:600px; height:300px; border:3px solid #333;"'>
<div id="pane0" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center" '>
pane0
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='"class":"bc", style:"height:200px"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
Sinlge pane - l1
</div>
</div>
<div class="wrapper">
<h3>two panes, vertical split:</h3>
<div id="animBC" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='"class":"bc", style:"height:200px"'>
<div id="sizing1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='style:"background-color:red", region:"left", splitter:true'>
Sinlge pane - left
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
Sinlge pane - center
<button data-dojo-type="dijit/form/Button">
Size Me
<script type="dojo/method" data-dojo-event="onClick">
var n = registry.byId("sizing1").domNode;
fx.animateProperty({
node:n,
duration:1000,
properties: { width: { end: (open ? "100" : "400"), units:"px" } },
onEnd: function(){
open = !open;
registry.byId("animBC").layout();
}
}).play(1);
</script>
</button>
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='"class":"bc", style:"height:200px"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center", splitter:true'>
Single pane - center (splitter) (this is unsupported, and does not work)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"right"'>
Single pane - right (no splitter)
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='"class":"bc", style:"height:200px"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
Single pane - center (no splitter)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"right", splitter:true'>
Single pane - right (splitter)
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='"class":"bc", style:"width:200px; height:400px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", splitter:true'>
Single pane - top (splitter)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
Single pane - center
</div>
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='"class":"bc", style:"width:200px; height:400px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"center"'>
Single pane - center
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", splitter:true'>
Single Pane Bottom (splitter)
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"top", splitter:true'>
Single Pane Top (splitter)
</div>
</div>
<div id="holder" style="visibility:hidden">
<div id="pane1" data-dojo-type="dijit/layout/ContentPane" >pane 1</div>
<div id="pane2" data-dojo-type="dijit/layout/ContentPane" >pane 2</div>
<div id="pane3" data-dojo-type="dijit/layout/ContentPane" >pane 3</div>
</div>
</body>
</html>