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>