2014-12-10 3 views
0

YUI 3 (Yahoo UI3)을 사용하여 Jsp 페이지에서 두 개의 탭을 만들고 싶습니다. 예를 들어YUI 3 TabView 문제

: TAB1 TAB2

TAB1 : 나는 아래의 자바 스크립트를 사용하여 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 : 'Tab2', content : 'test'와 같은 정적 텍스트를 추가하고 싶습니다. createCustomTabSafari ('Tab2', 'test')로 시도했지만 Tab1 외의 다른 위치에서 탭을 만들었습니다.

새로운 탭 대신 자식으로 두 번째 탭을 추가하려면 addChilld()/add() 메서드를 사용하는 방법.

나는 YUI API를 통해 addChild (child, index) 메소드를 볼 수 있지만이 방법에서는이 방법을 사용하는 방법을 모르겠다. enter code here rio.

또한 tab1이 클릭되었다는 것을 알고있는 경우 생성되는 탭을 읽는 방법을 표시하고 Tab2를 클릭하면 다른 것을 표시합니다.

Tab1 옆에 두 번째 탭을 추가 할 때 뭔가 알면 도움이됩니다.

미리 감사드립니다.

답변

0

YUI 웹 사이트의 예제는 Tabview 사용 방법을 보여주는 훌륭한 작업입니다. 여러 탭이이 예제를 볼 수 있습니다

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-fromjs.html, 다소 복잡한 예 : http://yuilibrary.com/yui/docs/tabview/tabview-add-remove.html

+0

예제는 정적 탭을 만들어 보여줍니다. 동적으로 탭을 만들고 싶습니다. 먼저 일부 데이터/체크 Tab1을 여러 번 표시 할 수 있지만 Tab2는 한 번만 표시해야하기 때문에 Tab1을 동적으로 만들고 싶습니다. – user3862416

+0

두 번째 링크의 자세한 예제를 살펴보면'add()'메소드를 사용한다는 것을 알 수 있습니다. http://yuilibrary.com/yui/docs/api/classes/TabView.html#method_add – hatch