2014-12-10 2 views
0

Я хотел бы создать две вкладки на странице Jsp с помощью YUI 3 (Yahoo UI3).YUI 3 TabView Issue

Для примера: Tab1 Таб2

Tab1: Я могу создать Tab1, используя приведенную ниже 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); 
    }); 
} 

Теперь я хочу добавить TAB2 с некоторым статическим текстом, как этикетка: «TAB2», содержание: «тест». Я попытался с createCustomTabSafari ('Tab2', 'test'), но он создал вкладку в другом месте вместо создания помимо Tab1.

Как использовать метод addChilld()/add() для добавления второй вкладки в качестве дочернего элемента вместо новой вкладки.

Я прошел через API YUI и мог видеть метод addChild (child, index), но не уверен, как использовать этот метод в этой scena enter code here rio.

Также, как читать вкладки, которые созданы, если я знаю, что нажата кнопка tab1 Я покажу что-то, и если Tab2 будет нажата, я отображу что-то другое.

Было бы полезно, если бы я кое-что узнал о добавлении второй вкладки рядом с Tab1.

Спасибо заранее.

ответ

0

Примеры на веб-сайте 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

+0

примеры показывают создание статических вкладок. Я хотел бы динамически создавать вкладки. Сначала я хочу динамически создавать Tab1, потому что на основе некоторых данных/проверки Tab1 может отображаться несколько раз, но Tab2 должен отображаться только один раз. – user3862416

+0

Если вы выполните подробный пример во второй ссылке, вы увидите, что он использует метод 'add()'. http://yuilibrary.com/yui/docs/api/classes/TabView.html#method_add – hatch

Смежные вопросы