YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: TabView Control: Adding Tabs

# TabView Control: Adding Tabs

This demonstrates how to dynamically add tabs to a TabView widget.

View example in new window.

Tab One Content

Tab Two Content

Tab Three Content

## 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:

<div id="demo" class="yui-navset"> <ul class="yui-nav"> <li><a href="#tab1"><em>Tab One Label</em></a></li> <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li> <li><a href="#tab3"><em>Tab Three Label</em></a></li> </ul> <div class="yui-content"> <div id="tab1"><p>Tab One Content</p></div> <div id="tab2"><p>Tab Two Content</p></div> <div id="tab3"><p>Tab Three Content</p></div> </div> </div>

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

<script type="text/javascript"> var tabView = new YAHOO.widget.TabView('demo'); </script>

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:

<script type="text/javascript"> var addTab = function() { var labelText = window.prompt('enter the tab label'); var content = window.prompt('enter the tab content'); if (labelText && content) { tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: content }) ); } }; </script> <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> <textarea name="code" class="JScript" cols="60" rows="1"> <script type="text/javascript"> var button = document.createElement('button'); button.innerHTML = 'add tab'; YAHOO.util.Event.on(button, 'click', addTab); tabView.appendChild(button); </script>

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 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:

- Build from Markup
- Build from Script
- Adding Tabs
- Removing Tabs
- Getting Content from an External Source
- Skinning TabView
- Using the TabView ARIA Plugin
- Editor inside a Tabview Control (included with examples for Rich Text Editor)
- ImageLoader with TabView (included with examples for ImageLoader Utility)
- TabView Integration (included with examples for DataTable Control)
- Complex Application (included with examples for Layout Manager)

### More TabView Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings