Question

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

例如： Tab1 Tab2

TAB1：我可以使用下面的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一些静态文本，例如label：＆＃39; Tab2＆＃39;，content：＆＃39; test＆＃39;。我尝试过使用createCustomTabSafari（＆＃39; Tab2＆＃39;，＆＃39; test＆＃39;）但是在其他位置创建了一个标签，而不是在Tab1之外创建标签。

如何使用addChilld（）/ add（）方法将第二个标签添加为子标签，而不是全新的标签。

我已经浏览了YUI API并且可以看到addChild（子，索引）方法，但不知道如何在此scena enter code here 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

YUI 3 TabView问题

1 个答案: