Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

TabContainer.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 23.9 KB

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

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

Context Navigation

source: Dev/trunk/src/client/dijit/tests/layout/TabContainer.html @ 483

Download in other formats: