<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>