탭 라이브러리 사용하기

위젯/가젯에 탭으로 표현되는 사용자 인터페이스를 추가하기 위해 tab라이브러리를 사용할 수 있습니다.
tab을 사용하기 위해서 위젯/가젯스펙에 최소한 아래 사항은 포함시켜야만 합니다.
  • <ModulePrefs> 하위에, <Require feature="tabs" /> 태그를 포함시켜서 탭 라이브러리를 로드합니다.
  • 탭을 구동하고, 동작시키기 위해 자바스크립트를 사용합니다.

탭의 구성요소

탭 라이브러리는 다음의 객체들 상에서 동작하는 함수들과 CSS로 구성됩니다.

  • TabSet 객체 : 탭 객체는 탭전체를 아우르는 부모 컨테이너에 위치합니다. 프로그램 상으로, 탭 객체는 각 탭 객체들의 배열입니다.
  • Tab 객체 : 하나의 탭 객체는 색인된 탭들의 배열 중 하나의 탭을 가리킵니다. 일반적인 HTML 구현은 "name container'로 API상에 언급된 <td> 요소로 구현됩니다. 이 HTML은 gadgets.Tab.getNameContainer() 함수를 통해 접근 가능합니다.
  • 콘텐츠 컨테이너 : 하나의 콘텐츠 컨테이너는 각각의 탭 객체를 가진 콘텐츠를 포함합니다. 일반적인 HTML 구현은 "content container"로 API상에 언급된, <div> 요소로 구현되고, gadgets.Tab.getContentContainer() 함수을 통해서 이 HTML에 접근 가능합니다.

동작방법

gadgets.TagSet() 생성자를 사용하여, 탭 객체(탭들의 set을 포함하는 객체)를 생성할 수 있습니다.

var tabs = new gadgets.TabSet(__MODULE)ID__, "Tab");

일단, 탭 객체를 생성했다면, 개개의 탭을 addTab() 함수를 사용해서 추가할 수 있습니다.
탭은 index, name과 unique ID 세개의 구성요소를 가집니다.

각각의 ID는 <div> 태그의 ID와 매칭됩니다. 그 <div>는 탭의 콘텐츠가 위치하는 곳에 기술됩니다. 만약, <div> 컨테이너를 제공하지 않는다면, 탭 라이브러리는 기본적으로 하나를 생성합니다.

addTab(String tabName, Object opt_params) 함수는 아래와 같은 파라미터가 필요합니다.

  • String tabName : 생성할 탭의 이름
  • Object opt_params : 선택적 파라미터 객체
    • contentContainer(선택적) : 현재 탭의 콘텐츠 컨테이너로써 사용되고 있는 HTML 부분들. 이 부분을 생략하면, 탭 라이브러리가 하나를 기본으로 생성.
    • callback(선택적) : 탭이 선택될 때 실행될 함수
    • index(선택적) : 탭에 삽입될 순서 번호. 생략하면 새로운 탭은 맨 끝으로 추가된다.

addTab()은 탭 컨테이너 id DOM을 포함하는 String을 반환한다.
아래와 같은 방법으로 탭들을 탭셋에 추가하고, 콘텐츠를 동작시킬 수 있습니다.

방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.

var one_Id = tabs.addTab("One");
document.getElementById(one_Id).innerHTML = "Content for tab One.";
var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">One</div>');
document.getElementById(one_Id).innerHTML = "첫번째 탭 공간입니다.";

* 탭의 이름을 HTML 코드로 정의해서 추가할 수도 있습니다.

방법 2 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.

tabs.addTab("Two", "two_id");
...
</script>
<div id="two_id" style="display:none">두번째 탭 공간입니다.</div>

방법 3 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다. 추가로 정적 콘텐츠에 동적인 콘텐츠를 추가하기 위해서 콜백 함수를 사용합니다. 

tabs.addTab("Three", "three_id", callback);
...
function callback(tabId) {
...
}
</script>
<div id="three_id" style="display:none">세번째 탭 공간입니다.</div>

방법 4 : 탭 추가시 이름으로 사용하기 위해서, addTab(tabName, opt_params)을 사용한다.

tabs.addTab("Four", {
 contentContainer: document.getElementById("domId"),
 callback: func,
 tooltip: "Tab Four"
});

아래는 서로 다른 방법으로 탭을 추가하고, 콘텐츠를 추가하는 예제입니다.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Tabs Demo" height="140" scrolling="true" >
    <Require feature="tabs" />
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
    <script type="text/javascript">
    // 탭을 초기화하고, 기본으로 선택될 탭의 이름으 지정합니다. (Two 탭은 삽입되어야 합니다.)
    var tabs = new gadgets.TabSet(__MODULE_ID__, "Two");
    function init() {
        // 방법 1 : 생성한 탭의 ID를 인식해서, 탭에 대응하는 <div>에 콘텐츠를 추가하기 위해 ID를 사용한다.
        var one_Id = tabs.addTab('<div style="color: red; font-weight: bold; background-color:#ccf;">One</div>');      
        document.getElementById(one_Id).innerHTML = "스크립트로 생성한 1번탭";
        // 방법 2 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.     
        tabs.addTab("Two", {
           contentContainer: document.getElementById("two_id")
        });
        // 방법 4 : 탭 추가시 이름으로 사용하기 위해서, addTab(tabName, opt_params)을 사용한다.
        tabs.addTab("Four", {           
           contentContainer: document.getElementById("four_id"),
           callback: callback,           
           tooltip: "I'm special"         
        });
        // 방법 3 : 탭을 만들고, 위젯/가젯의 HTML 부분에 해당하는 <div>를 추가하는 방법 - 정적 콘텐츠를 <div>안에 위치시킨다.
        // 추가로 정적 콘텐츠에 동적인 콘텐츠를 추가하기 위해서 콜백 함수를 사용합니다.
        // 인덱스를 넣어 2번째(0번째부터 시작)탭으로 넣어준다. index가 없으면 제일 뒤에 추가된다.
        tabs.addTab("Three", {
           contentContainer: document.getElementById("three_id"),
           callback: callback,
           index : 2
        });
    }
    // 3번째와 4번째 탭에서 불릴 동적 콘텐츠 함수이다.
    function callback(tabId) {
      var p = document.createElement("p");
      // 선택된 탭을 받아옵니다.
      var selectedTab = tabs.getSelectedTab();
      p.innerHTML = '탭 "' + selectedTab.getName() + '"에서 불린 동적 콘텐츠';
      document.getElementById(tabId).appendChild(p);
    }
    // 위젯/가젯이 로딩될 때 init를 호출한다.
    gadgets.util.registerOnLoadHandler(init);
    </script>
   <div id="two_id" style="display:none">2번탭의 콘텐츠로 사용될 영역</div>
   <div id="three_id" style="display:none">3번탭의 콘텐츠로 사용될 정적 영역</div>
  ]]>
  </Content>
</Module>


 

저작자 표시 비영리
신고
Posted by 코멧'★

티스토리 툴바