2N/A<div class="intro">

2N/A This example shows how to create a <code>TabView</code> widget from existing HTML on the page.

2N/A</div>

2N/A

2N/A<div class="example yui3-skin-sam">

2N/A{{>tabview-basic-source}}

2N/A</div>

2N/A

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

2N/A

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

2N/A

2N/A<h3>The Markup</h3>

2N/A

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

2N/A

2N/A```

2N/A<div id="demo">

2N/A <ul>

2N/A <li><a href="#foo">foo</a></li>

2N/A <li><a href="#bar">bar</a></li>

2N/A <li><a href="#baz">baz</a></li>

2N/A </ul>

2N/A <div>

2N/A <div id="foo">

2N/A <p>foo content</p>

2N/A </div>

2N/A <div id="bar">

2N/A <p>bar content</p>

2N/A </div>

2N/A <div id="baz">

2N/A <p>baz content</p>

2N/A </div>

2N/A </div>

2N/A</div>

2N/A```

2N/A

2N/A<h3>The JavaScript</h3>

2N/A

2N/A<p><code>TabView</code> extends <code>Widget</code>, and the <code>srcNode</code>

2N/Abecomes the <code>contentBox</code>. This is the

2N/Aminimal requirement to create a <code>Tabview</code> instance for the markup,

2N/Aand can be assigned using a selector. Calling render enlivens the <code>TabView

2N/A</code> making it usable.</p>

2N/A

2N/A```

2N/A var tabview = new Y.TabView({srcNode:'#demo'});

2N/A tabview.render();

2N/A```

2N/A

2N/A

2N/A<h2>Complete Example Source</h2>

2N/A```

2N/A{{>tabview-basic-source}}

2N/A```

2N/A