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

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

10139N/A</div>

12198N/A

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

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

10139N/A</div>

10139N/A

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

10139N/A

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

10139N/A

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

16632N/A

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

10139N/A

10139N/A```

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

16158N/A <ul>

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

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

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

10139N/A </ul>

10139N/A <div>

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

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

12773N/A </div>

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

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

10139N/A </div>

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

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

10139N/A </div>

10139N/A </div>

10139N/A</div>

13269N/A```

13269N/A

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

14258N/A

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

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

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

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

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

10139N/A

10139N/A```

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

10139N/A tabview.render();

10139N/A```

10139N/A

10139N/A

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

10139N/A```

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

10139N/A```

10139N/A