Example: TabView from Existing Markup

Creating A TabView From Existing Markup

A TabView can be created easily from existing markup, supporting a progressive enhancement approach to development.

The Markup

The only markup requirements are an unordered list of items and a corresponding group of divs.

<div id="demo">
    <ul>
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
        <li><a href="#baz">baz</a></li>
    </ul>
    <div>
        <div id="foo">
            <p>foo content</p>
        </div>
        <div id="bar">
            <p>bar content</p>
        </div>
        <div id="baz">
            <p>baz content</p>
        </div>
    </div>
</div>

The JavaScript

TabView extends Widget, and the srcNode becomes the contentBox. This is the minimal requirement to create a Tabview instance for the markup, and can be assigned using a selector. Calling render enlivens the TabView making it usable.

var tabview = new Y.TabView({srcNode:'#demo'});
tabview.render();

Complete Example Source

<div id="demo">
    <ul>
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
        <li><a href="#baz">baz</a></li>
    </ul>
    <div>
        <div id="foo">
            <p>foo content</p>
        </div>
        <div id="bar">
            <p>bar content</p>
        </div>
        <div id="baz">
            <p>baz content</p>
        </div>
    </div>
</div>

<script type="text/javascript">
YUI().use('tabview', function(Y) {
    var tabview = new Y.TabView({srcNode:'#demo'});
    tabview.render();
});
</script>