Example: Dynamic TabView from JavaScript

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>

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>