This example shows how to create a TabView widget dynamically and insert it into the page.
Creating a TabView From JavaScript
+ +A TabView can be created dynamically using a small amount of JavaScript.
The Markup
+ +
+Note: be sure to add the yui3-skin-sam classname to the
+page's <body> element or to a parent element of the widget in order to apply
+the default CSS skin. See Understanding Skinning.
+
<body class="yui3-skin-sam"> <!-- You need this skin class -->+ + +
There are no other markup requirements in this case, although you may want to have a placeholder to render the tabview into, which is what this example does.
+ +<div id="demo"> +</div>+ + +
The JavaScript
+ +The minimal requirement for creating a TabView from scratch are the labels and content for each tab.
+These are added as the children attribute when creating the TabView.
var tabview = new Y.TabView({
+ children: [{
+ label: 'foo',
+ content: '<p>foo content</p>'
+ }, {
+ label: 'bar',
+ content: '<p>bar content</p>'
+ }, {
+ label: 'baz',
+ content: '<p>baz content</p>'
+ }]
+});
+
+
+Rendering
+ +Calling render creates the TabView, inserting into the node
+passed to render.
+
tabview.render('#demo');
+
+
+Changing the Selected Tab
+ +By default, clicking a tab makes it selected and shows its content. You can also do this programmatically
+by calling the selectChild method on the TabView, passing it the index of the
+tab to be selected.
+
tabview.selectChild(2);+ + +
Complete Example Source
+<div id="demo">
+</div>
+
+<script type="text/javascript">
+YUI().use('tabview', function(Y) {
+ var tabview = new Y.TabView({
+ children: [{
+ label: 'foo',
+ content: '<p>foo content</p>'
+ }, {
+ label: 'bar',
+ content: '<p>bar content</p>'
+ }, {
+ label: 'baz',
+ content: '<p>baz content</p>'
+ }]
+ });
+
+ tabview.render('#demo');
+ tabview.selectChild(2);
+});
+</script>
+
+