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