Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/layout/TabContainer.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: 24.0 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
5	<title>TabContainer DOH Test</title>
6
7	<style>
8	@import "../../themes/claro/document.css";
9	@import "../css/dijitTests.css";
10	</style>
11
12	<!-- required: the default dijit theme: -->
13	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
14
15	<!-- required: dojo.js -->
16	<script type="text/javascript" src="../../../dojo/dojo.js"
17	data-dojo-config="isDebug: true"></script>
18	<script type="text/javascript" src="../helpers.js"></script>
19
20	<!-- only needed for alternate theme testing: do NOT use in your code! -->
21	<script type="text/javascript" src="../_testCommon.js"></script>
22
23
24	<script type="text/javascript">
25	dojo.require('doh.runner');
26	dojo.require("dijit.dijit"); // optimize: load dijit layer
27	dojo.require("dijit.layout.TabContainer");
28	dojo.require("dijit.layout.ContentPane");
29	dojo.require("dojo.parser"); // scan page for widgets and instantiate them
30
31	// create a do nothing, only for test widget
32	dojo.ready(function(){
33
34	doh.register("parse", function(){
35	dojo.parser.parse();
36	});
37
38	doh.register("creationAndDestruction", [
39
40	// Test that destroyRecursive removes all supporting widgets, including the list-of-tabs menu
41	// and the close menu. Also test that the second tab doesn't get selected
42	// for a split second as the TabContainer is being destroyed.
43	{
44	name: 'destroyRecursive',
45	runTest: function(t){
46	var num = dijit.registry.length;
47
48	var cp1 = new dijit.layout.ContentPane({title: "test pane 1", closable: true})
49	cp2 = new dijit.layout.ContentPane({title: "test pane 2", href: "doc0.html"})
50	tc = new dijit.layout.TabContainer({
51	id:"creationAndDestruction",
52	useMenu:true
53	}).placeAt(dojo.body());
54
55	var cp2selected = false;
56	cp2.watch("selected", function(){
57	cp2selected = true;
58	});
59
60	tc.addChild(cp1);
61	tc.addChild(cp2);
62	tc.startup();
63
64	tc.destroyRecursive();
65
66	t.is(dijit.registry.length, num, "registry length");
67	t.f(cp2selected, "second pane wasn't temporarily selected");
68	}
69	},
70
71	// Test that on destroyDescendants(), the second tab doesn't get selected
72	// for a split second as the TabContainer is being destroyed.
73	{
74	name: 'destroyDescendants',
75	runTest: function(t){
76	var cp1 = new dijit.layout.ContentPane({
77	id: "destroyDescendants_pane1",
78	title: "test pane 1",
79	closable: true
80	}),
81	cp2 = new dijit.layout.ContentPane({
82	id: "destroyDescendants_pane2",
83	title: "test pane 2",
84	href: "doc0.html"
85	}),
86	tc = new dijit.layout.TabContainer({
87	id:"destroyDescendants",
88	useMenu:true
89	}).placeAt(dojo.body());
90
91	var cp2selected = false;
92	cp2.watch("selected", function(){
93	cp2selected = true;
94	});
95	var downloadStarted = false;
96	dojo.connect(cp2, "onDownloadStart", function(){
97	downloadStarted = true;
98	});
99
100	tc.addChild(cp1);
101	tc.addChild(cp2);
102	tc.startup();
103
104	tc.destroyDescendants();
105
106	t.f(cp2selected, "second pane wasn't temporarily selected");
107	t.f(downloadStarted, "second pane never started downloading");
108	t.is(undefined, tc._selectedChildWidget, "no selected child widget");
109	}
110	},
111
112	// Check that tab labels for initial tabs are created
113	{
114	name: 'checkTabLabels',
115	runTest: function(t){
116	var tabLabels = dojo.query("#tc1 .tabLabel");
117	t.is(4, tabLabels.length);
118	}
119	}
120	]);
121
122	doh.register("addingTabs", [
123
124	// Test that adding a pane creates new tab button
125	{
126	name: 'add new tab',
127	runTest: function(t){
128	var tc = dijit.byId("tc1");
129	var cp1 = new dijit.layout.ContentPane({
130	id: "newTab1",
131	title: "newTab1",
132	content: "newTab1 content"
133	});
134	tc.addChild(cp1);
135
136	var tabLabels = dijit.byId("tc1").getChildren();
137
138	t.is(5, tabLabels.length, "there are 5 tabs");
139	}
140	},
141
142	// Test that scroll buttons show up when tab buttons overflow
143	{
144	name: 'addTabsOverflowMenu',
145	runTest: function(t){
146	var tc = dijit.byId("tc1");
147
148	var cp2 = new dijit.layout.ContentPane({
149	id: "newTab2",
150	title: "newTab2",
151	content: "newTab2 content"
152	});
153	tc.addChild(cp2);
154
155	var left = dojo.byId("tc1_tablist_leftBtn");
156	var right = dojo.byId("tc1_tablist_rightBtn");
157	var menu = dojo.byId("tc1_tablist_menuBtn");
158
159	t.t(left, "verify left scroll button exists");
160	t.t(right, "verify right scroll button exists");
161	t.t(menu, "verify dropdown menu button exists");
162
163	t.t(isVisible(left), "left scroll button is displayed");
164	t.t(isVisible(right), "right scroll button is displayed");
165	t.t(isVisible(menu), "menu button is displayed");
166	}
167	}
168	]);
169
170	doh.register("selectingTabs", [
171
172	// Check that tab button is scrolled into view when tab is selected
173	{
174	name: 'isVisible',
175	timeout: 10000,
176	runTest: function(t){
177	var d = new doh.Deferred();
178
179	var tc = dijit.byId("tc1");
180	var cp = dijit.byId("newTab1");
181
182	tc.selectChild(cp);
183
184	setTimeout(d.getTestCallback(function(){
185	var cpLeft = dojo.byId("tc1_tablist_leftBtn");
186	var left = dojo.position(cpLeft).x + dojo.position(cpLeft).w;
187
188	var cpRight = dojo.byId("tc1_tablist_rightBtn");
189	var right = dojo.position(cpRight).x;
190
191	var tab = dijit.byId("tc1_tablist_newTab1");
192	var tabLeft = dojo.position(tab.domNode).x;
193	var tabRight = dojo.position(tab.domNode).x + dojo.position(tab.domNode).w;
194
195	var isTabVisible = ((tabLeft > left) && (tabRight < right));
196	doh.t(isTabVisible, "verify chosen tab is in viewable area");
197	}), 1000);
198
199	return d;
200	}
201	}
202	]);
203
204	doh.register("icons", [
205	{
206	name: "initialIcon",
207	runTest: function(t){
208	var cp = dijit.byId("cp4");
209
210	t.is('tab1', innerText(cp.controlButton.containerNode), "tab label");
211	t.is('plusIcon', cp.controlButton.iconClass, "tab icon");
212	}
213	},
214	{
215	name: "changeIcon",
216	runTest: function(t){
217	var cp = dijit.byId("cp4");
218
219	cp.set({
220	"title": "note",
221	"iconClass": "noteIcon"
222	});
223
224	t.is('note', innerText(cp.controlButton.containerNode), "the tab's label has changed");
225	t.is('noteIcon', cp.controlButton.iconClass, "new icon is displayed in tab");
226	}
227	},
228	{
229	name: "noTitle",
230	runTest: function(t){
231	var cp = dijit.byId("cp7");
232	t.f(cp.controlButton.showLabel, "an icon exists, but there is no text label");
233	}
234	}
235	]);
236
237	doh.register("changeTabName", [
238	{
239	name: 'changeName',
240	runTest: function(t){
241	var cp = dijit.byId('cpTitle');
242	cp.set('title', 'newTitle');
243
244	var title = dojo.query("#tc1_tablist_cpTitle span.tabLabel")[0];
245
246	t.is('newTitle', innerText(title), "the tab's text label has changed");
247	}
248	}
249	]);
250
251	doh.register("deletingTabs", [
252
253	// Check that deleting a pane removes the tab button
254	{
255	name: 'deleteTab',
256	runTest: function(t){
257	var tc1 = dijit.byId("tc1");
258	var cp = dijit.byId("cpTitle");
259
260
261	// track resizes to cp, removing it from tc1 shouldn't cause a resize call
262	var cpResizes = 0;
263	dojo.connect(cp, "resize", function(){
264	cpResizes++;
265	});
266
267	tc1.removeChild(cp);
268
269	var childPanes = tc1.getChildren();
270
271	t.is(5, childPanes.length, "verify there are now only 4 tabs instead of 5");
272	t.t(cp.domNode, "verify that the deleted tab's content pane still exists on the page");
273
274	var label = dojo.byId("#tc1_tablist_cpTitle");
275	t.f(label, "verify that deleted tab's label does not exist");
276
277	t.is(0, cpResizes, "no resize");
278	}
279	},
280
281	// Check that scroll buttons disappear when no longer needed
282	{
283	name: 'removedOverflowMenu',
284	runTest: function(t){
285	var tc = dijit.byId("tc3");
286
287	var cp = dijit.byId('cp10');
288	tc.removeChild(cp);
289	cp = dijit.byId('cp9');
290	tc.removeChild(cp);
291	cp = dijit.byId('cp8');
292	tc.removeChild(cp);
293	cp = dijit.byId('cp7');
294	tc.removeChild(cp);
295
296	var left = dijit.byId("tc3_tablist_leftBtn").domNode;
297	var right = dijit.byId("tc3_tablist_rightBtn").domNode;
298	var menu = dijit.byId("tc3_tablist_menuBtn").domNode;
299
300	t.t(isHidden(left), "left scroll is hidden");
301	t.t(isHidden(right), "right scroll is hidden");
302	t.t(isHidden(menu), "menu is hidden");
303	}
304	}
305	]);
306
307	doh.register("closableTabs", [
308	{
309	name: "closeTab",
310	runTest: function(t){
311	var cp = dijit.byId("cp6");
312	var cp2 = dijit.byId("cp5");
313
314	t.t(cp.controlButton.closeButton, "close button is displayed");
315	t.f(cp2.controlButton.closeButton, "close button is not displayed");
316	}
317	}
318	]);
319
320	doh.register("menu", {
321	name: "menu",
322	runTest: function(t){
323	var tc1 = dijit.byId("tc1"),
324	children = tc1.getChildren();
325
326	// add an icon and change the title just for testing that the icon and label appear in the menu
327	children[0].set({
328	title: "new title",
329	iconClass: "noteIcon"
330	});
331
332	var menuBtn = dijit.byId("tc1_tablist_menuBtn");
333	menuBtn.toggleDropDown();
334
335	var menu = dijit.byId("tc1_menu");
336	doh.t(isVisible(menu), "menu exists and is visible");
337	doh.is(menu.getChildren().length, children.length, "# of menu children");
338	doh.is("new title", innerText(menu.getChildren()[0].containerNode));
339	doh.is("noteIcon", menu.getChildren()[0].iconClass);
340	},
341	tearDown: function(){
342	var tc1 = dijit.byId("tc1"),
343	children = tc1.getChildren();
344
345	children[0].set({
346	title: "old title",
347	iconClass: ""
348	});
349
350	var menuBtn = dijit.byId("tc1_tablist_menuBtn");
351	menuBtn.closeDropDown();
352	}
353	});
354
355	doh.register("layoutTests", [
356	{
357	name: "tabPosition",
358	runTest: function(t){
359	var tc = dijit.byId("tc1");
360
361	// top tabs above content
362	var topTabs = dojo.byId("tc1_tablist"),
363	topContent = dojo.query(".dijitTabPaneWrapper", "tc1")[0],
364	topTabsPos = dojo.position(topTabs),
365	topContentPos = dojo.position(topContent);
366	t.t(topTabsPos.y + topTabsPos.h <= topContentPos.y, "top tabs above content " +
367	dojo.toJson(topTabsPos) + dojo.toJson(topContentPos));
368
369	// left tabs to left of content
370	var leftTabs = dojo.byId("leftTabs_tablist"),
371	leftContent = dojo.query(".dijitTabPaneWrapper", "leftTabs")[0],
372	leftTabsPos = dojo.position(leftTabs),
373	leftContentPos = dojo.position(leftContent);
374	t.t(leftTabsPos.x + Math.floor(leftTabsPos.w) <= leftContentPos.x, "left tabs before content " +
375	dojo.toJson(leftTabsPos) + dojo.toJson(leftContentPos));
376
377	// right tabs to right of content
378	var rightTabs = dojo.byId("rightTabs_tablist"),
379	rightContent = dojo.query(".dijitTabPaneWrapper", "rightTabs")[0],
380	rightTabsPos = dojo.position(rightTabs),
381	rightContentPos = dojo.position(rightContent);
382	t.t(rightTabsPos.x >= rightContentPos.x + rightContentPos.w, "right tabs after content " +
383	dojo.toJson(rightTabsPos) + dojo.toJson(rightContentPos));
384
385	// bottom tabs below content
386	var bottomTabs = dojo.byId("bottomTabs_tablist"),
387	bottomContent = dojo.query(".dijitTabPaneWrapper", "bottomTabs")[0],
388	bottomTabsPos = dojo.position(bottomTabs),
389	bottomContentPos = dojo.position(bottomContent);
390	t.t(bottomTabsPos.y >= bottomContentPos.y + bottomContentPos.h, "bottom tabs below content " +
391	dojo.toJson(bottomTabsPos) + dojo.toJson(bottomContentPos));
392	}
393	},
394	{
395	name: "nested",
396	runTest: function(t){
397	var parent = dijit.byId("tcNestedParent"),
398	child = dijit.byId("tcNestedChild");
399
400	t.f(parent.nested, "parent TabContainer is not nested");
401
402	var children = parent.getChildren();
403	t.is(2, children.length, "parent TabContainer has multiple children");
404
405	t.t(children[1].nested, "second child of parent TabContainer has nested tabs");
406	t.t(dojo.hasClass("tcNestedChild_tablist", "dijitTabContainerTabListNested"), "nested CSS applied");
407
408	// test that when TabButtons overflow to 2 rows, the content area is reduced
409	parent.selectChild(dijit.byId("tcNestedChild"));
410	var content = dojo.query(".dijitTabPaneWrapper", "tcNestedChild")[0],
411	height0 = dojo.position(content).h;
412
413	var newGrandchildren = [];
414	for(var i=0; i<10; i++){
415	var gc = new dijit.layout.ContentPane({
416	title: "additional child #" + i,
417	content: "hello world " + i
418	});
419	newGrandchildren.push(gc);
420	child.addChild(gc);
421	}
422	var height1 = dojo.position(content).h;
423	doh.t(height1 < height0, "content area size reduced ", height1, height0);
424
425	// and that size increases back when children are removed
426	dojo.forEach(newGrandchildren, dojo.hitch(child, "removeChild"));
427	var height2 = dojo.position(content).h;
428	doh.is(height0, height2, "after deleting extra children height restored to original");
429	}
430	},
431	{
432	name: "doLayoutFalse",
433	runTest: function(t){
434	var tc = dijit.byId("tcNoLayout");
435	var cps = tc.getChildren();
436
437	tc.selectChild(cps[0]);
438	var height1 = tc.domNode.offsetHeight;
439	tc.selectChild(cps[1]);
440	var height2 = tc.domNode.offsetHeight;
441	tc.selectChild(cps[2]);
442	var height3 = tc.domNode.offsetHeight;
443
444	t.t(height1 < height2, "height 1 < height 2" + height1 + " < " + height2);
445	t.t(height2 < height3, "height 2 < height 3" + height2 + " < " + height3);
446	}
447	},
448	{
449	name: "doLayoutTrue",
450	runTest: function(t){
451	var tc = dijit.byId("tc3");
452	var cps = tc.getChildren();
453
454	tc.selectChild(cps[0]);
455	var height1 = tc.domNode.offsetHeight;
456	tc.selectChild(cps[1]);
457	var height2 = tc.domNode.offsetHeight;
458	tc.selectChild(cps[2]);
459	var height3 = tc.domNode.offsetHeight;
460
461	t.is(height1, height2);
462	t.is(height2, height3);
463	t.t(height1 > 10, "make sure height measurement is giving something reasonable");
464	}
465	}
466
467	]);
468	var tabId = 1;
469	function addTab(tc){
470	// summary:
471	// Add a tab to specified TabContainer
472	var cp = new dijit.layout.ContentPane({
473	title: 'Tab' + tabId,
474	content: "Contents of Tab " + tabId++
475	});
476	tc.addChild(cp);
477	}
478
479	doh.register("empty tab container",[
480	function createEmptyTabContainer(){
481	var emptyTC = new dijit.layout.TabContainer({id:"emptyTC", style:'height:200px;width:500px;'});
482	dojo.place(emptyTC.domNode, dojo.body());
483	emptyTC.startup();
484
485	var children = emptyTC.getChildren();
486	doh.is(0, children.length);
487	doh.t(isVisible(emptyTC));
488
489	var pos = dojo.position(emptyTC.domNode);
490	var heightDiff = 200 - pos.h;
491	var widthDiff = 500 - pos.w;
492	doh.t(-0.01 < heightDiff && heightDiff < 0.01);
493	doh.t(-0.01 < widthDiff && widthDiff < 0.01);
494	},
495	function addTabToEmptyTabContainer(){
496	var tc = dijit.byId("emptyTC");
497	addTab(tc);
498
499	var children = tc.getChildren();
500	doh.is(1, children.length);
501	doh.is("Tab1", children[0].title);
502	doh.is("Contents of Tab 1", tc.selectedChildWidget.domNode.innerHTML);
503
504	doh.t(isVisible(tc.tablist.containerNode.childNodes[0]));
505	},
506	function add2ndTabToEmptyTabContainer(){
507	var tc = dijit.byId("emptyTC");
508	addTab(tc);
509	tc.selectChild(tc.getChildren()[1]);
510
511	var children = tc.getChildren();
512	doh.is(2, children.length);
513	doh.is("Tab2", children[1].title);
514	doh.is("Contents of Tab 2", tc.selectedChildWidget.domNode.innerHTML);
515
516	doh.t(isVisible(tc.tablist.containerNode.childNodes[1]));
517	},
518	function remove2ndTabToEmptyTabContainer(){
519	var tc = dijit.byId("emptyTC");
520	tc.removeChild(tc.getChildren()[1]);
521
522	var children = tc.getChildren();
523	doh.is(1, children.length);
524	doh.is("Tab1", children[0].title);
525	doh.is("Contents of Tab 1", tc.selectedChildWidget.domNode.innerHTML);
526	}
527	]);
528
529	doh.register("tab label scrolling", [
530	function initialScroll(){
531	// Make sure that tab labels are scrolled so that selected tab visible
532	var tc = dijit.byId("scroll"),
533	tcPos = dojo.position("scroll");
534	labelPos = dojo.position("scroll_tablist_nine");
535	doh.t(tcPos.x < labelPos.x, "tcPos.x (" + tcPos.x + ") < labelPos.x (" + labelPos.x + ")");
536	doh.t(tcPos.x + tcPos.w > labelPos.x + labelPos.w,
537	"tcPos.x (" + tcPos.x + ") + tcPos.w (" + tcPos.w +
538	") < labelPos.x " + labelPos.x + " + labelPos.w + (" + labelPos.w + ")");
539	},
540	function selectATab(){
541	// Make sure that tab labels are scrolled so that selected tab visible
542	var d = new doh.Deferred();
543	var tc = dijit.byId("scroll");
544	tc.selectChild(dijit.byId("one"));
545	setTimeout(d.getTestCallback(function(){
546	var tcPos = dojo.position("scroll");
547	labelPos = dojo.position("scroll_tablist_one");
548	doh.t(tcPos.x < labelPos.x, "tcPos.x (" + tcPos.x + ") < labelPos.x (" + labelPos.x + ")");
549	doh.t(tcPos.x + tcPos.w > labelPos.x + labelPos.w,
550	"tcPos.x (" + tcPos.x + ") + tcPos.w (" + tcPos.w +
551	") < labelPos.x " + labelPos.x + " + labelPos.w + (" + labelPos.w + ")");
552	}), 500);
553
554	return d;
555	}
556	]);
557	doh.run();
558
559	});
560	</script>
561
562	</head>
563	<body class="claro">
564
565	<h1 class="testTitle">Dijit layout.TabContainer DOH tests</h1>
566
567	<div id="tc1" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 300px; height: 100px;" '>
568	<div id="cpTitle" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab1", selected:true'>
569	Lorem ipsum and all around...
570	</div>
571	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab2"'>
572	Lorem ipsum and all around - second...
573	</div>
574	<div id="t3" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab3", closable:true'>
575	Lorem ipsum and all around - third...
576	</div>
577	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab4", closable:true'>
578	Lorem ipsum and all around - last...
579	</div>
580	</div>
581
582	<div id="tc3" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 300px; height: 100px;" '>
583	<div id="cp4" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab1", selected:true, iconClass:"plusIcon"'>
584	Lorem ipsum and all around...
585	</div>
586	<div id="cp5" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab2"'>
587	Lorem ipsum and all around - last...
588	<br />
589	<br />
590	<br />
591	Hmmm even more expanding tabs......
592	</div>
593	<div id="cp6" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab3", closable:true'>
594	Lorem ipsum and all around - last...
595	</div>
596	<div id="cp7" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"plus", closable:true, iconClass:"plusIcon", showTitle:false'>
597	Lorem ipsum and all around - last...
598	</div>
599	<div id="cp8" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab4", closable:true'>
600	Lorem ipsum and all around - last...
601	</div>
602	<div id="cp9" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab5", closable:true'>
603	Lorem ipsum and all around - last...
604	</div>
605	<div id="cp10" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"tab6", closable:true'>
606	Lorem ipsum and all around - last...
607	</div>
608	</div>
609
610	<div id="tcNestedParent" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 400px; height: 300px;" '>
611	<div id="tcNestedChild" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='title:"Tab 1", nested:true '>
612	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first inner tab", selected:true'>
613	Lorem ipsum and all around...
614	</div>
615	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second inner tab"'>
616	Lorem ipsum and all around - second...
617	</div>
618	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last inner tab"'>
619	Lorem ipsum and all around - last...
620	</div>
621	</div>
622	<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='title:"Tab 2", nested:true'>
623	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first inner tab", selected:true'>
624	Lorem ipsum and all around...
625	</div>
626	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second inner tab"'>
627	Lorem ipsum and all around - second...
628	</div>
629	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last inner tab"'>
630	Lorem ipsum and all around - last...
631	</div>
632	</div>
633	</div>
634
635	<div id="tcNoLayout" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 100%;", doLayout:false'>
636	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
637	Lorem ipsum and all around...
638	</div>
639	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
640	Lorem ipsum and all around - second...
641	<br />
642	Hmmm expanding tabs......
643	</div>
644	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
645	Lorem ipsum and all around - last...
646	<br />
647	<br />
648	<br />
649	Hmmm even more expanding tabs......
650	</div>
651	</div>
652	<br />
653
654	<div id="leftTabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;", tabPosition:"left-h"'>
655	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
656	Left tabs
657	</div>
658	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
659	Lorem ipsum and all around - second...
660	</div>
661	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
662	Lorem ipsum and all around - last...
663	</div>
664	</div>
665	<br />
666
667	<div id="rightTabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;", tabPosition:"right-h"'>
668	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
669	Right tabs
670	</div>
671	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
672	Lorem ipsum and all around - second...
673	</div>
674	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
675	Lorem ipsum and all around - last...
676	</div>
677	</div>
678	<br />
679
680	<div id="bottomTabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;", tabPosition:"bottom"'>
681	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
682	Bottom tabs
683	</div>
684	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
685	Lorem ipsum and all around - second...
686	</div>
687	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
688	Lorem ipsum and all around - last...
689	</div>
690	</div>
691
692	<div id="scroll" dojoType="dijit.layout.TabContainer" jsid="scroll" style="width: 300px; height:200px;">
693	<div dojoType="dijit.layout.ContentPane" title="One" jsid="one" id="one">One</div>
694	<div dojoType="dijit.layout.ContentPane" title="Two" jsid="two" id="two">Two</div>
695	<div dojoType="dijit.layout.ContentPane" title="Three" jsid="three" id="three">Three</div>
696	<div dojoType="dijit.layout.ContentPane" title="Four" jsid="four" id="four">Four</div>
697	<div dojoType="dijit.layout.ContentPane" title="Five" jsid="five" id="five">Five</div>
698	<div dojoType="dijit.layout.ContentPane" title="Six" jsid="six" id="six">Six</div>
699	<div dojoType="dijit.layout.ContentPane" title="Seven" jsid="seven" id="seven">Seven</div>
700	<div dojoType="dijit.layout.ContentPane" title="Eight" jsid="eight" id="eight">Eight</div>
701	<div dojoType="dijit.layout.ContentPane" selected="true" title="Nine" jsid="nine" id="nine">Nine</div>
702	</div>
703
704	</body>
705	</html>

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

Download in other formats: