YUI Library Examples: TabView Control: Adding Tabs

TabView Control: Adding Tabs

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

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:

We will create a <div> called demo and include the TabView markup:

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

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:

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.

More TabView Control Resources:

Copyright © 2007 Yahoo! Inc. All rights reserved.

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