diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/tabview/tabview-basic.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/tabview/tabview-basic.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,234 @@ + + + + + Example: TabView from Existing Markup + + + + + + + + + + +
+
+

+
+ + +

Example: TabView from Existing Markup

+
+
+
+
+

This example shows how to create a TabView widget from existing HTML on the page.

+
+ +
+
+ +
+
+

foo content

+
+
+

bar content

+
+
+

baz content

+
+
+
+ + + +
+ +

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>
+ +
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+

Examples That Use This Component

+
+ +
+ +
+
+ +
+
+
+
+ + + + + + + + + + +