YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: TabView: Dynamic TabView from JavaScript

## TabView: Dynamic TabView from JavaScript

This example shows how to create a `TabView` widget dynamically and insert it into the page.

View example in new window.

### Creating A TabView From JavaScript

A `TabView` can be created dynamically using a small amount of JavaScript.

#### The Markup

There are no markup requirements in this case, although you may want to have a placeholder to render the tabview into, which is what this example does.

    <div id="demo"></div>

    <div id="demo">
    </div>

<div id="demo"> </div>

#### The JavaScript

The minimal requirement for creating a `TabView` from scratch are the labels and content for each tab. These are added as the `children` attribute when creating the `TabView`.

        var tabview = new Y.TabView({        children: [{            label: 'foo',            content: '<p>foo content</p>'        }, {            label: 'bar',            content: '<p>bar content</p>'        }, {            label: 'baz',            content: '<p>baz content</p>'        }]    });

        var tabview = new Y.TabView({
            children: [{
                label: 'foo',
                content: '<p>foo content</p>'
            }, {
                label: 'bar',
                content: '<p>bar content</p>'
            }, {
                label: 'baz',
                content: '<p>baz content</p>'
            }]
        });

var tabview = new Y.TabView({ children: [{ label: 'foo', content: '<p>foo content</p>' }, { label: 'bar', content: '<p>bar content</p>' }, { label: 'baz', content: '<p>baz content</p>' }] });

#### Rendering

Calling render creates the `TabView`, inserting into the node passed to render.

        tabview.render('#demo');

        tabview.render('#demo');

tabview.render('#demo');

#### Changing the Selected Tab

By default, clicking a tab makes it selected and shows its content. You can also do this programmatically by calling the `selectChild` method on the `TabView`, passing it the index of the tab to be selected.

        tabview.selectChild(2);

        tabview.selectChild(2);

tabview.selectChild(2);

Copyright © 2010 Yahoo! Inc. All rights reserved.

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