#

# Example: Dynamic TabView from JavaScript

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

## Creating a TabView From JavaScript

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

### The Markup

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <body class="yui3-skin-sam"> <!-- You need this skin class -->

There are no other 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>

### 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>'
        }]
    });

### Rendering

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

    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);

## Complete Example Source

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

    <script type="text/javascript">
    YUI().use('tabview', function(Y) {
        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>'
            }]
        });

        tabview.render('#demo');
        tabview.selectChild(2);
    });
    </script>