6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<div class="intro">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney <p>This example shows how to create a <code>TabView</code> widget dynamically and insert it into the page.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<div class="example yui3-skin-sam">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney{{>tabview-fromjs-source}}
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h2>Creating a TabView From JavaScript</h2>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p>A <code>TabView</code> can be created dynamically using a small amount of JavaScript.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h3>The Markup</h3>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p>There are no markup requirements in this case, although you may want to have a placeholder to render the tabview into, which is what this example does.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<div id="demo">
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h3>The JavaScript</h3>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p>The minimal requirement for creating a <code>TabView</code> from scratch are the labels and content for each tab.
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt SweeneyThese are added as the <code>children</code> attribute when creating the <code>TabView</code>.</p>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney var tabview = new Y.TabView({
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney children: [{
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney label: 'foo',
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney content: '<p>foo content</p>'
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney label: 'bar',
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney content: '<p>bar content</p>'
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney label: 'baz',
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney content: '<p>baz content</p>'
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h3>Rendering</h3>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p>Calling render creates the <code>TabView</code>, inserting into the node
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeneypassed to render.
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h3>Changing the Selected Tab</h3>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<p>By default, clicking a tab makes it selected and shows its content. You can also do this programmatically
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeneyby calling the <code>selectChild</code> method on the <code>TabView</code>, passing it the index of the
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeneytab to be selected.
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney<h2>Complete Example Source</h2>
6f22811f3148a8875c32d1e4a34f19dc1b8579d4Matt Sweeney{{>tabview-fromjs-source}}