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