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.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

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.