<div class="intro">
    <p>This example shows how to create a <code>TabView</code> widget from existing HTML on the page.</p>
</div>

<div class="example yui3-skin-sam">
{{>tabview-basic-source}}
</div>

<h2>Creating A TabView From Existing Markup</h2>

<p>A <code>TabView</code> can be created easily from existing markup, supporting a progressive enhancement approach to development.</p>

<h3>The Markup</h3>

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

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

<h3>The JavaScript</h3>

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

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


<h2>Complete Example Source</h2>
```
{{>tabview-basic-source}}
```
