YUI Library Examples: TabView Control: Build from Script

TabView From Script

It is possible to build a YUI TabView widget completely from script.

We will create a container to insert our new TabView into. This can be any existing element on the page, including the <body>, but for this example, we will create a <div> called container:

First we will create a TabView instance, omitting the element argument, which signals the constructor to create the TabView container:

Next we add tabs to our TabView, including the label and content for each tab and set the default selected tab to "active":

All that is left is to append our new TabView to our container:

This is a basic example of how to build a TabView from JavaScript.

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: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: TabView Control: Build from Script

TabView From Script

Configuration for This Example

YUI Logger Output:

TabView Control Examples:

More TabView Control Resources: