112 lines
3.2 KiB
HTML
112 lines
3.2 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>dojo.NodeList.instantiate() tests</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../dojo/resources/dojo.css";
|
||
|
|
@import "css/dijitTests.css";
|
||
|
|
#container { height:200px; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../dojo/dojo.js"
|
||
|
|
djConfig="parseOnLoad: true, isDebug: true"></script>
|
||
|
|
<script type="text/javascript" src="_testCommon.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dijit._Widget");
|
||
|
|
dojo.require("dojo.parser");
|
||
|
|
dojo.require("dijit.form.Button");
|
||
|
|
dojo.require("dijit.layout.TabContainer");
|
||
|
|
dojo.require("dijit.layout.ContentPane");
|
||
|
|
dojo.require("dijit.layout.LinkPane");
|
||
|
|
|
||
|
|
// declare a simple widget to use as a base test:
|
||
|
|
dojo.declare("test._Widget",dijit._Widget,{
|
||
|
|
message:"",
|
||
|
|
postCreate:function(){
|
||
|
|
this.inherited(arguments);
|
||
|
|
this.connect(this.domNode,"onclick","workit");
|
||
|
|
dojo.style(this.domNode,{
|
||
|
|
cursor:"pointer",
|
||
|
|
color:"#333"
|
||
|
|
});
|
||
|
|
this.domNode.innerHTML += this.message +" ("+this.id +")";
|
||
|
|
console.log('created',this.id);
|
||
|
|
},
|
||
|
|
workit:function(){
|
||
|
|
dojo.place(this.domNode,this.domNode.parentNode,"end");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var init = function(){
|
||
|
|
dojo.byId("status").innerHTML = "after.";
|
||
|
|
|
||
|
|
// test widgeting
|
||
|
|
dojo.query("#testList li").instantiate(test._Widget,{}).connect("onclick",console.log);
|
||
|
|
|
||
|
|
// make a tab container from some div, and all it's children div's
|
||
|
|
dojo.query("#container")
|
||
|
|
.forEach(function(n){
|
||
|
|
dojo.query("div",n)
|
||
|
|
// create contentpanes from the children and style them
|
||
|
|
.instantiate(dijit.layout.ContentPane,{})
|
||
|
|
.forEach(function(wn,idx){
|
||
|
|
dojo.mixin(dijit.byNode(wn),{ title:"tab" + (idx + 1) })
|
||
|
|
})
|
||
|
|
;
|
||
|
|
})
|
||
|
|
.instantiate(dijit.layout.TabContainer,{})
|
||
|
|
;
|
||
|
|
// should we add auto-startup calling?
|
||
|
|
dijit.byId("container").startup();
|
||
|
|
//dijit.byId("container").layout();
|
||
|
|
|
||
|
|
// another test widget example
|
||
|
|
dojo.query("#altList li").instantiate(test._Widget,{ message:"woot" });
|
||
|
|
|
||
|
|
// bunches of buttons, use you imagination on how to relate them to something
|
||
|
|
dojo.query("#buttonTest").forEach(function(n){
|
||
|
|
dojo.query("button",n).instantiate(dijit.form.Button,{
|
||
|
|
onClick:function(){
|
||
|
|
console.log('clicked:',this.domNode);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
dojo.addOnLoad(init)
|
||
|
|
//dojo.addOnLoad(function(){
|
||
|
|
// setTimeout(init,25);
|
||
|
|
//});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>dojo.NodeList.instantiate() tests: <span id="status">before</span></h1>
|
||
|
|
|
||
|
|
<h2>Some simple widgets:</h2>
|
||
|
|
<ul id="testList">
|
||
|
|
<li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li>
|
||
|
|
</ul>
|
||
|
|
<ul id="altList">
|
||
|
|
<li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li><li>inner</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2>A TabContainer:</h2>
|
||
|
|
<div id="container">
|
||
|
|
<div>pane1</div>
|
||
|
|
<div>pane2</div>
|
||
|
|
<div>pane3</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Some Buttons</h2>
|
||
|
|
<div id="buttonTest">
|
||
|
|
<button>button 1</button>
|
||
|
|
<button>button 2</button>
|
||
|
|
<button>button 3</button>
|
||
|
|
<button>button 4</button>
|
||
|
|
<button>button 5</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|