This example shows how to create a TabView widget from existing HTML on the page.
Creating A TabView From Existing Markup
A TabView can be created easily from existing markup, supporting a progressive enhancement approach to development.
The Markup
The only markup requirements are an unordered list of items and a corresponding group of divs.
<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>
The JavaScript
TabView extends Widget, and the srcNode
becomes the contentBox. This is the
minimal requirement to create a Tabview instance for the markup,
and can be assigned using a selector. Calling render enlivens the TabView
making it usable.
var tabview = new Y.TabView({srcNode:'#demo'});
tabview.render();
Complete Example Source
<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>
<script type="text/javascript">
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({srcNode:'#demo'});
tabview.render();
});
</script>