TAB

HOMEWORKS 탭 컴포넌트.

Summary

TAB은 사용에게 여러 컨텐츠를 구조에 맞게 축약해서 보여줄 수 있는 최적의 컴포넌트입니다.

TAB은 헤더와 컨테이너 영역을 가지며, 헤더의 버튼에 따라 컨테이너의 내용이 바뀝니다.

Usage

• HTML

  <div class="tab">
    <a href="#" class="tab-item active">TAB HEADER 1</a>
    <a href="#" class="tab-item">TAB HEADER 2</a>
  </div>
  <div class="tab-container">
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">SUB TITLE 1</span>
        </h2>
        <div class="guide">
            TAB 1 Contents
        </div>
    </div>
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">SUB TITLE 2</span>
        </h2>
        <div class="guide">
            TAB 2 Contents
        </div>
    </div>
  </div>
  

• JAVASCRIPT

  var $tab = $('.tab').tab();
  

• VIEW HOOK

  <!--
  ================================================================
  VIEW HOOK은 HOMEWORKS에서 제공하는 HTML 속성 확장을 이용하기 때문에,
  JAVASCRIPT를 생략할 수 있습니다.
  ================================================================
  -->
  <div class="tab" data-tab="true">
    <a href="#" class="tab-item active">TAB HEADER 1</a>
    <a href="#" class="tab-item">TAB HEADER 2</a>
  </div>
  <div class="tab-container">
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">SUB TITLE 1</span>
        </h2>
        <div class="guide">
            TAB 1 Contents
        </div>
    </div>
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">SUB TITLE 2</span>
        </h2>
        <div class="guide">
            TAB 2 Contents
        </div>
    </div>
  </div>
  

Functions

Tab

• Type: Function
• Description: Tab을 초기화하는 함수.

• Arguments:

  • element: Element
  • options: Object (optional)

• Options:

  • None

Triggers

Modal Button 요소에 클래스를 아래와 같이 기입하면, Modal 엘리먼트에 이벤트가 제공됩니다.

tab.move

• Description: 탭의 특정한 인덱스를 활성화 시킬 때, 사용합니다.
• Event: tab.move
• Bind Selector: {COMPONENT ROOT}

• Example:

  • JAVASCRIPT

    var $tab = $('.tab').tab();
    
    // TAB MENU 중 3번째 활성화.
    $tab.triggerHandler('tab.move', 2);
    

tab.next

• Description: 현재기준으로 다음 탭을 활성화 시킬 때, 사용합니다.
• Event: tab.next
• Bind Selector: {COMPONENT ROOT}

• Example:

  • JAVASCRIPT

    var $tab = $('.tab').tab();
    
    // TAB MENU 현재 활성화 기준 다음 탭 활성화.
    $tab.triggerHandler('tab.next');
    

tab.prev

• Description: 현재기준으로 이전 탭을 활성화 시킬 때, 사용합니다.
• Event: tab.prev
• Bind Selector: {COMPONENT ROOT}

• Example:

• JAVASCRIPT

  var $tab = $('.tab').tab();
  // TAB MENU 현재 활성화 기준 이전 탭 활성화.
  $tab.triggerHandler('tab.prev');
  

View Hook

TAB 컴포넌트는 View Hook을 제공합니다.

View Hook이 걸려있는 대상에 TAB을 자동적으로 바인딩합니다.

Attribute - tab

• Value: <any>
• Description: null, undefined외 값을 지정 권장.

Example

• HTML

  <div class="tab" 
    data-tab="true"
  >
    <a href="#" class="tab-item active">TAB HEADER 1</a>
    <a href="#" class="tab-item">TAB HEADER 2</a>
  </div>
  <div class="tab-container">
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">SUB TITLE 1</span>
        </h2>
        <div class="guide">
            TAB 1 Contents
        </div>
    </div>
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">SUB TITLE 2</span>
        </h2>
        <div class="guide">
            TAB 2 Contents
        </div>
    </div>
  </div>