6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<div class="intro">
eb342a1f0f84e3622fc67dafdeb13ad11f1e501cMatt Sweeney <p>This example shows how to create a <code>TabView</code> widget from existing HTML on the page.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<div class="example yui3-skin-sam">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney{{>tabview-basic-source}}
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h2>Creating A TabView From Existing Markup</h2>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p>A <code>TabView</code> can be created easily from existing markup, supporting a progressive enhancement approach to development.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h3>The Markup</h3>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p>The only markup requirements are an unordered list of items and a corresponding group of divs.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<div id="demo">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <li><a href="#foo">foo</a></li>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <li><a href="#bar">bar</a></li>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <li><a href="#baz">baz</a></li>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <div id="foo">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <p>foo content</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <div id="bar">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <p>bar content</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <div id="baz">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <p>baz content</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h3>The JavaScript</h3>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p><code>TabView</code> extends <code>Widget</code>, and the <code>srcNode</code>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeneybecomes the <code>contentBox</code>. This is the
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeneyminimal requirement to create a <code>Tabview</code> instance for the markup,
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeneyand can be assigned using a selector. Calling render enlivens the <code>TabView
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney</code> making it usable.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney var tabview = new Y.TabView({srcNode:'#demo'});
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h2>Complete Example Source</h2>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney{{>tabview-basic-source}}