Yahoo! Developer Network Home - Help

YDN Site Search

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

The first thing we need to do is load the TabView source files and dependencies:

<!-- for default tab skin, which includes tabview-core.css and skins/sam/tabview-skin.css --> <link rel="stylesheet" type="text/css" href="../../../2.x/build/tabview/assets/skins/sam/tabview.css" /> <!-- utilities includes all dependencies for this example --> <script type="text/javascript" src="../../../2.x/build/utilities/utilities.js"></script> <script type="text/javascript" src="../../../2.x/build/tabview/tabview.js"></script>

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

- Editor inside a Tabview control (included with examples for Rich Text Editor (beta))
- Build from Markup
- Build from Script
- Adding Tabs
- Removing Tabs
- Getting Content from an External Source
- Skinning TabView
- ImageLoader with TabView (included with examples for ImageLoader Utility (experimental))

### More TabView Control Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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