YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: TabView Control: Build from Script

# TabView Control: Build from Script

This demonstrates how to build a TabView from JavaScript.

View example in new window.

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

<div id="container"></div>

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

var tabView = new YAHOO.widget.TabView();

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

tabView.addTab( new YAHOO.widget.Tab({ label: 'lorem', content: '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>', active: true })); tabView.addTab( new YAHOO.widget.Tab({ label: 'ipsum', content: '<ul><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li><li><a href="#">Lorem ipsum dolor sit amet.</a></li></ul>' })); tabView.addTab( new YAHOO.widget.Tab({ label: 'dolor', content: '<form action="#"><fieldset><legend>Lorem Ipsum</legend><label for="foo"> <input id="foo" name="foo"></label><input type="submit" value="submit"></fieldset></form>' }));

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

tabView.appendTo('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: 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 © 2010 Yahoo! Inc. All rights reserved.

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