index.mustache revision 6f22811f3148a8875c32d1e4a34f19dc1b8579d4
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <h2 id="anatomy">Anatomy of a TabView</h2>
4a73cf8ee07ae396be20231ac252a24830f3c801Bob Halley <p>A <code>TabView</code> consists of a list of links that target a content element.</p>
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <p>The basic markup needed to create from HTML is the following:</p>
4a73cf8ee07ae396be20231ac252a24830f3c801Bob Halley<div id="demo">
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <li><a href="#foo">foo</a></li>
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <li><a href="#bar">bar</a></li>
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <li><a href="#baz">baz</a></li>
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <div id="foo">foo content</div>
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <div id="bar">bar content</div>
f690123c15ce847b78eb68ba842a94c88a8e5529Michael Graff <div id="baz">baz content</div>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington<p>After a <code>TabView</code> is rendered, the final markup becomes:
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington<div class="yui3-widget yui3-tabview">
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <div id="demo" class="yui3-tabview-content">
6a759e38699d133302d0df120d7afcd4af721951David Lawrence <ul class="yui3-tabview-list">
49f7148b1e61fc383c7d41081ca48b1255a0c143Brian Wellington <li class="yui3-tab yui3-widget yui3-tab-selected"><a href="#foo" class="yui3-tab-label yui3-tab-content">foo</a></li>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <li class="yui3-tab yui3-widget"><a href="#bar" class="yui3-tab-label yui3-tab-content">bar</a></li>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <li class="yui3-tab yui3-widget"><a href="#baz" class="yui3-tab-label yui3-tab-content">baz</a></li>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <div class="yui3-tabview-panel">
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington <div id="foo" class="yui3-tab-panel">foo content</div>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <div id="bar" class="yui3-tab-panel">bar content</div>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <div id="baz" class="yui3-tab-panel">baz content</div>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <h2 id="instantiating">Creating and Configuring a TabView</h2>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <p>A <code>TabView</code> instance can be created from existing markup on the page, or dynamically
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington using JavaScript.</p>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <h3 id="from-markup">From Existing Markup</h3>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <p>To create from existing markup, first conform to the basic markup pattern, then create a
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington new <code>TabView</code> instance, pointing to the existing <code>srcNode</code>, and render.</p>
021de83ee3e6ebbde6ae20528d44de823c36e35aAndreas Gustafsson<div id="demo">
19a3e16a9d74a55abb172410d4121fbacdd0c800Brian Wellington <li><a href="#foo">foo</a></li>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <li><a href="#bar">bar</a></li>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <li><a href="#baz">baz</a></li>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <div id="foo">foo content</div>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <div id="bar">bar content</div>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <div id="baz">baz content</div>
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian WellingtonYUI().use('tabview', function(Y) {
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington var tabview = new Y.TabView({
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington srcNode: '#demo'
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington <h3 id="from-js">From JavaScript</h3>
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington <p>To create purely from JavaScript, all that is required is passing the <code>TabView</code>
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington constructor a list of <code>children</code> containing their respective <code>label</code>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington and <content> attributes, and call render. As with all YUI <code>Widget</code>s,
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington render takes an optional container to render into, or defaults to the <code>body</code> element.</p>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington<div id="demo"></div>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian WellingtonYUI().use('tabview', function(Y) {
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington var tabview = new Y.TabView({
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington label: 'foo',
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington content: '<p>foo content</p>'
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington label: 'bar',
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington content: '<p>bar content</p>'
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington label: 'baz',
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington content: '<p>baz content</p>'
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <h2 id="skinning">Skinning TabView</h2>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <p>The <code>TabView</code> comes with a basic skin by default. This can be easily
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington customized using the rich set of <a href="#anatomy">classNames</a>.</p>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <p>For a more polished look and feel, we also ship with the "sam skin", which can
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington be applied by adding the <code>yui3-skin-sam</code> className to some ancestor:</p>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington<body class="yui3-skin-sam">
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington<div id="demo">
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <li><a href="#foo">foo</a></li>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <li><a href="#bar">bar</a></li>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <li><a href="#baz">baz</a></li>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <div id="foo">foo content</div>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <div id="bar">bar content</div>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <div id="baz">baz content</div>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <h2 id="events">TabView Events</h2>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <p>TabViews fire the following events during operation:</p>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <th>Event</th>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <th>When</th>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <th>Payload</th>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <td><code>addChild</code></td>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <td>a Tab is added to the TabView</td>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <td><code>child, index</code></td>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <td><code>removeChild</code></td>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <td>a Tab is removed from the TabView</td>
a67fc7e1ff1e39ebf5e58a77b2ee413615ff1ff3Brian Wellington <td><code>child, index</code></td>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <td><code>selectionChange</code></td>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <td>the selected tab changes</td>
bf5582ad4b2b464539059fba2806b546ec3c5caaBrian Wellington <td><code>prevVal, newVal</code></td>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <td><code>render</code></td>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <td>a Tabview is rendered</td>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <td>Normal change event signature (<code>newVal</code>, <code>prevVal</code>, etc). When dragging, extra event property <code>ddEvent : (drag:drag event)</code> is added</td>
f104fbbe4e868a039ed786c0087c0412ab6dd923Brian Wellington <p>This is not an exhaustive list. See the <a href="/yui/3/api/module_<?php echo($section); ?>.html">API docs</a> for a complete listing.</p>