You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.7 KiB
159 lines
4.7 KiB
<html> |
|
<head> |
|
<title>dojo.NodeList.instantiate() tests</title> |
|
|
|
<style type="text/css"> |
|
@import "../themes/claro/document.css"; |
|
@import "css/dijitTests.css"; |
|
#container { height: 200px; } |
|
</style> |
|
|
|
<!-- required: a default dijit theme: --> |
|
<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/> |
|
|
|
<!-- required: dojo.js --> |
|
<script type="text/javascript" src="../../dojo/dojo.js" |
|
data-dojo-config="isDebug: true"></script> |
|
|
|
<!-- not needed, for testing alternate themes --> |
|
<script type="text/javascript" src="_testCommon.js"></script> |
|
|
|
<script type="text/javascript"> |
|
dojo.require("doh.runner"); |
|
dojo.require("dojo.on"); |
|
dojo.require("dijit._WidgetBase"); |
|
dojo.require("dijit.form.Button"); |
|
dojo.require("dijit.layout.TabContainer"); |
|
dojo.require("dijit.layout.ContentPane"); |
|
|
|
dojo.ready(function(){ |
|
|
|
// declare a simple widget to use as a base test: |
|
dojo.declare("TestWidget", dijit._WidgetBase, { |
|
message: "", |
|
postCreate:function(){ |
|
this.inherited(arguments); |
|
this.own(dojo.on(this.domNode, "click", dojo.hitch(this, "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"); |
|
} |
|
}); |
|
|
|
doh.register("Instantiate", [ |
|
function testWidget(){ |
|
dojo.query("#list1 li").instantiate(TestWidget, {}).connect("onclick", console.log); |
|
|
|
var li = dijit.byId("TestWidget_0"); |
|
doh.t(li, "TestWidget_0 exists"); |
|
doh.is("pointer", dojo.style("TestWidget_0", "cursor")); |
|
doh.is("inner (TestWidget_0)", li.domNode.innerHTML); |
|
}, |
|
|
|
function testWidget2(){ |
|
dojo.query("#list2 li").instantiate(TestWidget, { message: "woot" }); |
|
|
|
li = dijit.byId("TestWidget_12"); |
|
doh.t(li, "TestWidget_12 exists"); |
|
doh.is("pointer", dojo.style("TestWidget_12", "cursor")); |
|
doh.is("innerwoot (TestWidget_12)", li.domNode.innerHTML); |
|
}, |
|
|
|
function TabContainer(){ |
|
// 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(); |
|
|
|
var tc = dijit.byId("container"); |
|
doh.t(tc, "Tab container exists"); |
|
|
|
var tabs = tc.tablist.getChildren(); |
|
doh.is(3, tabs.length); |
|
dojo.forEach(tabs, function(tab, i){ |
|
doh.is("tab" + (i + 1), tab.label); |
|
}); |
|
|
|
var children = tc.getChildren(); |
|
doh.is(3, children.length); |
|
dojo.forEach(children, function(child, i){ doh.is("pane"+(i+1), child.domNode.innerHTML); }) |
|
}, |
|
|
|
function Buttons(){ |
|
// 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(){ |
|
this.containerNode.innerHTML = this.label + " was clicked"; |
|
} |
|
}); |
|
}); |
|
|
|
var b1 = dijit.byId("b1"); |
|
doh.t(b1, "button 1 exists"); |
|
doh.is("button 1", b1.label); |
|
|
|
var b2 = dijit.byId("b2"); |
|
doh.t(b2, "button 2 exists"); |
|
doh.is("button 2", b2.label); |
|
|
|
var b3 = dijit.byId("b3"); |
|
doh.t(b3, "button 3 exists"); |
|
doh.is("button 3", b3.label); |
|
|
|
var b4 = dijit.byId("b4"); |
|
doh.t(b4, "button 4 exists"); |
|
doh.is("button 4", b4.label); |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro"> |
|
|
|
<h1>dojo.NodeList.instantiate() tests</h1> |
|
|
|
<h2>Some simple widgets:</h2> |
|
<ul id="list1" |
|
><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="list2" |
|
><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 id="b1">button 1</button |
|
><button id="b2">button 2</button |
|
><button id="b3">button 3</button |
|
><button id="b4">button 4</button |
|
></div> |
|
|
|
</body> |
|
</html>
|
|
|