#

# Example: TabView from Existing Markup

This example shows how to create a `TabView` widget from existing HTML on the page.

- foo
- bar
- baz

foo content

bar content

baz content

## 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>