Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/_Widget-placeAt.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 5.3 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4
5	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
6
7	<title>_Widget.placeAt tests</title>
8
9	<!-- test decoration styles -->
10	<style type="text/css">
11	@import "../themes/claro/document.css";
12	@import "../../dijit/tests/css/dijitTests.css";
13	</style>
14
15	<!-- required: a default dijit theme: -->
16	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
17
18	<!-- required: load the dojo base -->
19	<script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="isDebug:true" ></script>
20	<!-- for theme-switching, only for dijit -->
21	<script type="text/javascript" src="../../dijit/tests/_testCommon.js"></script>
22
23	<script type="text/javascript">
24	dojo.require("doh.runner");
25
26	// load components need for this test
27	dojo.require("dojo.parser");
28	dojo.require("dijit.form.Button");
29	dojo.require("dijit.layout.TabContainer");
30	dojo.require("dijit.layout.ContentPane");
31	dojo.require("dijit.layout.BorderContainer");
32
33	// run all the tests onload
34	dojo.ready(function(){
35
36	var pane1, pane2, tc;
37
38	doh.register("parse", function(){
39	dojo.parser.parse();
40	});
41
42	doh.register("dijit.tests.placeAt",
43	[
44	function placeAsDOMNodeChild(){
45	// create a TabContainer
46	tc = new dijit.layout.TabContainer({
47	style: "height:200px; width:200px"
48	}, "tabContainerThinger").placeAt("container");
49
50	doh.is(dojo.byId("container"), tc.domNode.parentNode, "TabContainer is child of container");
51	},
52
53	function placeAsWidgetChild(){
54	// add the child to the TabContainer now:
55	pane1 = new dijit.layout.ContentPane({ title:"empty" }).placeAt(tc);
56
57	doh.is(pane1, tc.getChildren()[0], "pane1 is child of TabContainer");
58	},
59
60	function placeAsWidgetChildOrdered(){
61	// add this child (created second) as the first tab:
62	pane2 = new dijit.layout.ContentPane({ title:"first" }).placeAt(tc, 0);
63
64	doh.is(pane2, tc.getChildren()[0], "pane2 is new first child of TabContainer");
65	doh.is(pane1, tc.getChildren()[1], "pane1 is now second child of TabContainer");
66	},
67
68	function startup(){
69	// just starting the TabContainer so we can do some more tests
70	tc.startup();
71	tc.selectChild(pane2);
72	},
73
74	function placeAsFirst(){
75	pane2.set("content","button should appear BEFORE this text");
76
77	// create a button, and add it to pane2 before the above text
78	var button = new dijit.form.Button({
79	label:"alert",
80	onClick: function(){
81	alert('woot');
82	}
83	}).placeAt(pane2.containerNode, "first");
84
85	doh.is(button.domNode, pane2.containerNode.firstChild, "button is first child");
86	doh.is(3, button.domNode.nextSibling.nodeType, "button went before other content");
87	},
88
89	function placeBefore(){
90	// and a button, this time we'll place it before the TabContainer's dom
91	var otherButton = new dijit.form.Button({
92	label:"destroy TabContainer",
93	onClick:function(){
94	tc.destroyRecursive();
95	}
96	}).placeAt(tc.domNode, "before");
97
98	doh.is(tc.domNode, otherButton.domNode.nextSibling, "otherButton is before tab container");
99	}
100	]
101	);
102	doh.register("dijit.tests.placeAt BorderContainer",
103	[
104	function addPanes(){
105	// Add top and left pane
106	dijit.byId("addStuff").onClick();
107
108	var bc = dijit.byId("bc1"),
109	children = bc.getChildren();
110
111	doh.is(3, children.length);
112
113	var bcPos = dojo.position(bc.domNode),
114	center = dijit.byId("center"),
115	centerPos = dojo.position(center.domNode),
116	left = dojo.filter(children, function(child){ return child.region == "left";})[0],
117	leftPos = dojo.position(left.domNode),
118	top = dojo.filter(children, function(child){ return child.region == "top";})[0];
119
120	doh.t(leftPos.x >= bcPos.x, "left in BorderContainer");
121	doh.t(centerPos.x >= leftPos.x + leftPos.w, "left vs. center horizontal");
122	doh.is("<p>wowzers</p>", left.domNode.innerHTML.toLowerCase(), "left pane");
123	doh.is("<div>some html text</div>", top.domNode.innerHTML.toLowerCase(), "top pane");
124	}
125	]
126	);
127	doh.run();
128	});
129	</script>
130	</head>
131	<body class="claro">
132	<h1 class="testTitle">_Widget.placeAt tests</h1>
133
134	<div id="container">
135
136	</div>
137
138	<h2>Node2</h2>
139	<p>This is where the tab srcNodeRef is, but it gets moved above us into the id="container" div. (Should be there already.)</p>
140	<div id="otherContainer">
141	<div id="tabContainerThinger"></div>
142	</div>
143
144	<h2>BorderContainer sample</h2>
145	<div id="bc1" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='style:"width:600px; height:400px"'>
146	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"center", region:"center"'>
147	<button id="addStuff" data-dojo-type="dijit.form.Button">
148	Add Stuff
149	<script type="dojo/method" data-dojo-event="onClick">
150	this.set("disabled", true);
151	var bc = dijit.byId("bc1");
152
153	// add a left pane and add content
154	new dijit.layout.ContentPane({
155	region:"left",
156	style:"width:100px"
157	}).placeAt(bc).set("content","<p>wowzers</p>");
158
159	// add a top pane, and add content
160	new dijit.layout.ContentPane({
161	region:"top",
162	style:"height:100px"
163	}).placeAt(bc).set("content","<div>some HTML text</div>");
164
165	</script>
166	</button>
167	</div>
168	</div>
169
170	</body>
171	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: