Yahoo! Developer Network Home - Help

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'); 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.

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

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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