YUI Library Examples: TabView Control: Build from Script

TabView From Script

It is possible to build a YUI TabView widget completely from script.

We will create a container to insert our new TabView into. This can be any existing element on the page, including the <body>, but for this example, we will create a <div> called container:


1	<div id="container"></div>
	view plain \| print \| ?

First we will create a TabView instance, omitting the element argument, which signals the constructor to create the TabView container:


1	var tabView = new YAHOO.widget.TabView();
	view plain \| print \| ?

Next we add tabs to our TabView, including the label and content for each tab and set the default selected tab to "active":


1	tabView.addTab( new YAHOO.widget.Tab({
2	label: 'lorem',
3	content: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>',
4	active: true
5	}));
6
7	tabView.addTab( new YAHOO.widget.Tab({
8	label: 'ipsum',
9	content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>'
10
11	}));
12
13	tabView.addTab( new YAHOO.widget.Tab({
14	label: 'dolor',
15	content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>'
16	}));
	view plain \| print \| ?

All that is left is to append our new TabView to our container:


1	tabView.appendTo('container');
	view plain \| print \| ?

This is a basic example of how to build a TabView from JavaScript.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

TabView Control Examples:

More TabView Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.