YUI 3 TabView Issue

Question

I would like to create two tabs in a Jsp page using YUI 3 (Yahoo UI3).

For Example: Tab1 Tab2

Tab1: I am able to create Tab1 using the below java script.

createCustomTabSafari = function(lblTxt,eId){

YUI().use('tabview', function(Y) {
    var tabview = new Y.TabView({
        children: [{
            label: lblTxt,
            content: document.getElementById(eId)
        }]
    });       
     tabview.render('#demo');
     tabview.selectChild(0);
  });
}

Now I want to add Tab2 with some static text like label: 'Tab2', content: 'test'. I have tried with createCustomTabSafari ('Tab2','test') but it is created a tab at some other location instead of creating besides the Tab1.

How to use addChilld()/add() method to add the second tab as a child instead of a brand new tab.

I have gone through the YUI API and could see addChild(child, index) method but not sure how to use this method in this scena enter code here rio.

Also, How to read the tabs that are created that is if I know tab1 is clicked I will display something and if Tab2 is clicked I will display something different.

It would be helpful if I get to know something on adding a second tab next to the Tab1.

Thanks in Advance.

Answer 1

The examples on the YUI website do a really good job of showing how to use the Tabview. You can see this example which has multiple tabs: http://yuilibrary.com/yui/docs/tabview/tabview-fromjs.html

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);
});

And for adding and removing tabs, a rather complex example: http://yuilibrary.com/yui/docs/tabview/tabview-add-remove.html