Yahoo! Developer Network Home - Help

YDN Site Search

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

### 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
- Editor inside a Tabview Control (included with examples for Rich Text Editor (beta))
- ImageLoader with TabView (included with examples for ImageLoader Utility)
- Complex Application (included with examples for Layout Manager (beta))

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