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	tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) );
6	};
7
8	</script>
9	<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>
10	<textarea name="code" class="JScript" cols="60" rows="1">
11	<script type="text/javascript">
12	var button = document.createElement('button');
13	button.innerHTML = 'add tab';
14
15	YAHOO.util.Event.on(button, 'click', addTab);
16	tabView.appendChild(button);
17	</script>
	view plain \| print \| ?

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

YUI Logger Output:

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

Reload with logging
and debugging enabled.

YUI Library Examples: TabView Control: Adding Tabs

Adding Tabs to a TabView

YUI Logger Output:

TabView Control Examples:

More TabView Control Resources: