1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<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>
|
