javascript - YUI 3 TabView 问题

Question

我想使用 YUI 3 (Yahoo UI3) 在 Jsp 页面中创建两个选项卡。

例如:Tab1 Tab2

选项卡 1:我可以使用以下 java 脚本创建 Tab1。

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

现在我想添加带有一些静态文本的 Tab2，例如标签:'Tab2'，内容:'test'。我尝试使用 createCustomTabSafari ('Tab2','test') 但它是在其他位置创建的选项卡，而不是在 Tab1 之外创建。

如何使用 addChilld()/add() 方法将第二个选项卡添加为子选项卡而不是全新的选项卡。

我已经浏览过 YUI API 并且可以看到 addChild(child, index) 方法，但不确定如何在此场景中使用此方法在此处输入代码rio。

此外，如何读取创建的选项卡，如果我知道点击了 tab1，我将显示一些内容，如果点击了 Tab2，我将显示不同的内容。

如果我了解有关在 Tab1 旁边添加第二个选项卡的内容，将会很有帮助。

提前致谢。

Answer 1

YUI 网站上的示例很好地展示了如何使用 Tabview。您可以看到这个有多个选项卡的示例: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);
});

对于添加和删除选项卡，一个相当复杂的示例:http://yuilibrary.com/yui/docs/tabview/tabview-add-remove.html