git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_instantiate.html

   1 <html>
   2         <head>
   3                 <title>dojo.NodeList.instantiate() tests</title>
   4
   5                 <style type="text/css">
   6                         @import "../../dojo/resources/dojo.css";
   7                         @import "css/dijitTests.css";
   8                         #container { height:200px; }
   9                 </style>
  10
  11                 <script type="text/javascript" src="../../dojo/dojo.js"
  12                         djConfig="parseOnLoad: true, isDebug: true"></script>
  13                 <script type="text/javascript" src="_testCommon.js"></script>
  14
  15                 <script type="text/javascript">
  16                         dojo.require("dijit._Widget");
  17                         dojo.require("dojo.parser");
  18                         dojo.require("dijit.form.Button");
  19                         dojo.require("dijit.layout.TabContainer");
  20                         dojo.require("dijit.layout.ContentPane");
  21                         dojo.require("dijit.layout.LinkPane");
  22
  23                         // declare a simple widget to use as a base test:
  24                         dojo.declare("test._Widget",dijit._Widget,{
  25                                 message:"",
  26                                 postCreate:function(){
  27                                         this.inherited(arguments);
  28                                         this.connect(this.domNode,"onclick","workit");
  29                                         dojo.style(this.domNode,{
  30                                                 cursor:"pointer",
  31                                                 color:"#333"
  32                                         });
  33                                         this.domNode.innerHTML += this.message +" ("+this.id +")";
  34                                         console.log('created',this.id);
  35                                 },
  36                                 workit:function(){
  37                                         dojo.place(this.domNode,this.domNode.parentNode,"end");
  38                                 }
  39                         });
  40
  41                         var init = function(){
  42                                 dojo.byId("status").innerHTML = "after.";
  43
  44                                 // test widgeting
  45                                 dojo.query("#testList li").instantiate(test._Widget,{}).connect("onclick",console.log);
  46
  47                                 // make a tab container from some div, and all it's children div's
  48                                 dojo.query("#container")
  49                                         .forEach(function(n){
  50                                                 dojo.query("div",n)
  51                                                         // create contentpanes from the children and style them
  52                                                         .instantiate(dijit.layout.ContentPane,{})
  53                                                         .forEach(function(wn,idx){
  54                                                                 dojo.mixin(dijit.byNode(wn),{ title:"tab" + (idx + 1) })
  55                                                         })
  56                                                 ;
  57                                         })
  58                                         .instantiate(dijit.layout.TabContainer,{})
  59                                 ;
  60                                 // should we add auto-startup calling?
  61                                 dijit.byId("container").startup();
  62                                 //dijit.byId("container").layout();
  63
  64                                 // another test widget example
  65                                 dojo.query("#altList li").instantiate(test._Widget,{ message:"woot" });
  66
  67                                 // bunches of buttons, use you imagination on how to relate them to something
  68                                 dojo.query("#buttonTest").forEach(function(n){
  69                                         dojo.query("button",n).instantiate(dijit.form.Button,{
  70                                                 onClick:function(){
  71                                                         console.log('clicked:',this.domNode);
  72                                                 }
  73                                         });
  74                                 });
  75                         };
  76                         dojo.addOnLoad(init)
  77                         //dojo.addOnLoad(function(){
  78                         //      setTimeout(init,25);
  79                         //});
  80                 </script>
  81         </head>
  82         <body>
  83
  84                 <h1>dojo.NodeList.instantiate() tests: <span id="status">before</span></h1>
  85
  86                         <h2>Some simple widgets:</h2>
  87                         <ul id="testList">
  88                                         <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>
  89                         </ul>
  90                         <ul id="altList">
  91                                         <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>
  92                         </ul>
  93
  94                         <h2>A TabContainer:</h2>
  95                         <div id="container">
  96                                 <div>pane1</div>
  97                                 <div>pane2</div>
  98                                 <div>pane3</div>
  99                         </div>
 100
 101                         <h2>Some Buttons</h2>
 102                         <div id="buttonTest">
 103                                 <button>button 1</button>
 104                                 <button>button 2</button>
 105                                 <button>button 3</button>
 106                                 <button>button 4</button>
 107                                 <button>button 5</button>
 108                         </div>
 109
 110         </body>
 111 </html>