DROPDOWN

HOMEWORKS Form 드롭다운 컴포넌트.

Summary

DROPDOWN은 드롭다운 형태로 제공되는 새로운 유형의 Form 컨트롤러 입니다.

버튼 혹은 링크 태그와 연결하여 메뉴 기능을 해당 컴포넌트를 이용해 제공해주실 수 있습니다.

Usage

• HTML

  <a href="#" class="btn btn-dropdown">OPEN DROPDOWN</a>
  <div class="dropdown">
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 1</span>
    </a>
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 2</span>
    </a>
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 3</span>
    </a>
  </div>
  

• JAVASCRIPT

  var $button = $('.btn-dropdown');
  var $dropdown = $('.dropdown').dropdown({
    target: $button,
    direction: 'center'
  });
  

• VIEW HOOK

  <!--
  ================================================================
  VIEW HOOK은 HOMEWORKS에서 제공하는 HTML 속성 확장을 이용하기 때문에,
  JAVASCRIPT를 생략할 수 있습니다.
  ================================================================
  -->
  <a href="#" class="btn btn-dropdown">OPEN DROPDOWN</a>
  <div class="dropdown" data-pen=".btn-dropdown" data-direction="center">
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 1</span>
    </a>
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 2</span>
    </a>
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 3</span>
    </a>
  </div>
  

Functions

Dropdown

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

• Arguments:

  • element: Element
  • options: Object (optional)

• Options:

  • direction: DropdownDirection [left, center, right]

    • 버튼을 클릭했을 때 드롭다운 메뉴가 나타날 상대위치.

Dropdown.method.addHandler

• Type: Method
• Description: DROPDOWN의 핸들러 버튼을 추가하는 함수.

• Arguments:

• element: Element

• target: Element

• Example:

    var $button = $('.btn-dropdown');
    var $button2 = $('.btn-dropdown2');
  
    var $dropdown = $('.dropdown').dropdown({
        target: $button,
        direction: 'center'
    });
  
    // $button2 엘리먼트를 핸들러 버튼으로 추가합니다.
    $dropdown.addHandler($button2);
  

Dropdown.method.removeDropdown

• Type: Method
• Description: DROPDOWN을 핸들러에서 제거하는 함수.

• Arguments:

• element: Element

• target: Element

• Example:

    var $button = $('.btn-dropdown');
  
    var $dropdown = $('.dropdown').dropdown({
        target: $button,
        direction: 'center'
    });
  
    $button.bind('click', function() {
        setTimeout(function() {
            // 드롭다운 핸들러 버튼을 클릭하면, 1초 뒤 나타난 드롭다운을 숨깁니다. 
            $dropdown.removeDropdown($button);
        }, 1000);
    });
  

View Hook

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

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

Attribute - dropdown

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

Attribute - direction

• Value: <string>
• Description: left, center, right 형식 중 선택 (Default: center)

Example

• HTML

  <a href="#" class="btn btn-dropdown">OPEN DROPDOWN</a>
  <div class="dropdown"
    data-pen=".btn-dropdown"
    data-direction="center"
  >
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 1</span>
    </a>
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 2</span>
    </a>
    <a href="#" class="dropdown-menu">
        <span>Dropdown Menu 3</span>
    </a>
  </div>