YUI Library Examples: TabView Control: Adding Tabs

Adding Tabs to a TabView

Dynamically adding tabs to a YUI TabView widget is done with the addTab method.

We will create a <div> called demo and include the TabView markup:


1	<div id="demo" class="yui-navset">
2	<ul class="yui-nav">
3	<li><a href="#tab1"><em>Tab One Label</em></a></li>
4	<li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
5	<li><a href="#tab3"><em>Tab Three Label</em></a></li>
6	</ul>
7	<div class="yui-content">
8	<div id="tab1"><p>Tab One Content</p></div>
9	<div id="tab2"><p>Tab Two Content</p></div>
10	<div id="tab3"><p>Tab Three Content</p></div>
11	</div>
12	</div>
	view plain \| print \| ?

Next, create an instance of TabView from our demo element:


1	<script type="text/javascript">
2	var tabView = new YAHOO.widget.TabView('demo');
3	</script>
	view plain \| print \| ?

For this example, a simple prompt will accept the new tab label and content. We will need a function to accept the input, create, and add the new tab:


1	<script type="text/javascript">
2	var addTab = function() {
3	var labelText = window.prompt('enter the tab label');
4	var content = window.prompt('enter the tab content');
5	if (labelText && content) {
6	tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) );
7	}
8	};
9
10	</script>
11	<p>A button will be used to add new tabs. Here we create it, and assign a click listener that calls our addTab function when the button is clicked:</p>
12	<textarea name="code" class="JScript" cols="60" rows="1">
13	<script type="text/javascript">
14	var button = document.createElement('button');
15	button.innerHTML = 'add tab';
16
17	YAHOO.util.Event.on(button, 'click', addTab);
18	tabView.appendChild(button);
19	</script>
	view plain \| print \| ?

This is a basic example of the TabView's addTab method.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: TabView Control: Adding Tabs

Adding Tabs to a TabView

Configuration for This Example

YUI Logger Output:

TabView Control Examples:

More TabView Control Resources: