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