5
<title>Example: Dynamic TabView from JavaScript</title>
6
<link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
<link rel="stylesheet" href="../assets/css/main.css">
8
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
<script src="../../build/yui/yui-min.js"></script>
14
<h1>Example: Dynamic TabView from JavaScript</h1>
19
<div id="main" class="yui3-u">
20
<div class="content"><div class="intro">
21
<p>This example shows how to create a <code>TabView</code> widget dynamically and insert it into the page.</p>
24
<div class="example yui3-skin-sam">
28
<script type="text/javascript">
29
YUI().use('tabview', function(Y) {
30
var tabview = new Y.TabView({
33
content: '<p>foo content</p>'
36
content: '<p>bar content</p>'
39
content: '<p>baz content</p>'
43
tabview.render('#demo');
44
tabview.selectChild(2);
50
<h2>Creating a TabView From JavaScript</h2>
52
<p>A <code>TabView</code> can be created dynamically using a small amount of JavaScript.</p>
56
<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>
58
<pre class="code prettyprint"><div id="demo">
59
</div></pre>
62
<h3>The JavaScript</h3>
64
<p>The minimal requirement for creating a <code>TabView</code> from scratch are the labels and content for each tab.
65
These are added as the <code>children</code> attribute when creating the <code>TabView</code>.</p>
67
<pre class="code prettyprint">var tabview = new Y.TabView({
69
label: 'foo',
70
content: '<p>foo content</p>'
72
label: 'bar',
73
content: '<p>bar content</p>'
75
label: 'baz',
76
content: '<p>baz content</p>'
83
<p>Calling render creates the <code>TabView</code>, inserting into the node
87
<pre class="code prettyprint">tabview.render('#demo');</pre>
90
<h3>Changing the Selected Tab</h3>
92
<p>By default, clicking a tab makes it selected and shows its content. You can also do this programmatically
93
by calling the <code>selectChild</code> method on the <code>TabView</code>, passing it the index of the
97
<pre class="code prettyprint">tabview.selectChild(2);</pre>
100
<h2>Complete Example Source</h2>
101
<pre class="code prettyprint"><div id="demo">
104
<script type="text/javascript">
105
YUI().use('tabview', function(Y) {
106
var tabview = new Y.TabView({
108
label: 'foo',
109
content: '<p>foo content</p>'
111
label: 'bar',
112
content: '<p>bar content</p>'
114
label: 'baz',
115
content: '<p>baz content</p>'
119
tabview.render('#demo');
120
tabview.selectChild(2);
122
</script></pre>
127
<div id="sidebar" class="yui3-u">
131
<div class="sidebox">
133
<h2 class="no-toc">Examples</h2>
137
<ul class="examples">
140
<li data-description="This example shows how to create a TabView wigdet from existing HTML.">
141
<a href="tabview-basic.html">TabView from Existing Markup</a>
146
<li data-description="This example shows how to create a TabView wigdet from JavaScript.">
147
<a href="tabview-fromjs.html">Dynamic TabView from JavaScript</a>
152
<li data-description="This example shows how to add and remove Tabs.">
153
<a href="tabview-add-remove.html">Adding and Removing Tabs</a>
158
<li data-description="This example shows how to load tab content remotely using a YQL plugin.">
159
<a href="tabview-yql.html">Loading Tab Content</a>
171
<div class="sidebox">
173
<h2 class="no-toc">Examples That Use This Component</h2>
177
<ul class="examples">
188
<li data-description="Demonstrates how to add browser history support to a TabView widget using the History Utility.">
189
<a href="../history/history-tabview.html">History + TabView</a>
201
<script src="../assets/vendor/prettify/prettify-min.js"></script>
202
<script>prettyPrint();</script>