YUI 3 TabView问题

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

例如： 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：“TAB2”，内容：“测试”。我尝试过使用createCustomTabSafari（'Tab2'，'test'），但它在其他位置创建了一个选项卡，而不是在Tab1之外创建。

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

我已经通过YUI API并可以看到addChild（child，index）方法，但不知道如何在这个scena enter code here rio中使用此方法。

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

如果我知道在Tab1旁边添加第二个选项卡，将会有所帮助。

在此先感谢。

来源

2014-12-10 user3862416

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

来源

2014-12-10 22:23:44 hatch

的例子展示创建静态标签。我想动态地创建选项卡。首先，我想动态地创建Tab1，因为基于某些数据/检查Tab1可以多次显示，但Tab2应该只显示一次。 – user3862416 2014-12-10 22:39:11

如果您按照第二个链接中的详细示例，您会看到它使用'add（）'方法。 http://yuilibrary.com/yui/docs/api/classes/TabView.html#method_add – hatch 2014-12-11 15:43:48

YUI 3 TabView问题

回答

相关问题