본문바로가기

Component

Dropdown

Basic

Dropdown 컴포넌트는 드롭다운 메뉴를 렌덜이 할 수 있는 컴포넌트입니다. class="Dropdown"

Dropdown 컴포넌트는 base element와 함께 동작합니다. base element는 Dropdown 컴포넌트 이전의 element를 지칭하며 layout 구성상, Dropdown 컴포넌트 이전에 base element가 위치하지 못할 경우, data-base 속성을 이용하여 base element를 지정할 수 있습니다.

Textinput

Textinput 컴포넌트와 연동한 예제입니다.

Grouping Menu

각 메뉴를 나타내는 <li> 태그에 "Header" 클래스를 추가함으로써 메뉴별로 그룹핑 할 수 있습니다. <hr> 태그와 함께 사용하여 divider로 사용할 수 있습니다.

Multi Depth

다중 depth를 가지고 있는 메뉴의 경우 <li> 태그의 하위 element로 <ul> 태그를 지정합니다.
하위 element에 해당하는 메뉴는 hover 상태에 열립니다.

Keyboard Support

키보드를 통해서 Dropdown 메뉴를 선택 및 이동할 수 있습니다. Key 정보는 아래와 같습니다.

Keyboard 설명 비고
Enter, ↓(Down) Dropdown 위젯을 엽니다. base 엘리먼트에 포커스가 가 있는 경우
Enter Dropdown 내 해당 메뉴를 선택합니다. base 엘리먼트에 포커스가 가 있고 특정 메뉴가 선택되어 있는 경우
Esc Dropdown 위젯을 닫습니다. Dropdown 위젯이 열린 경우
↑(Up), ↓(Down), ←(Left), →(Right) 메뉴 아이템 간 이동 Dropdown 위젯이 열린 경우
Attributes

data-base

  • selector
    • Dropdown의 base 엘리먼트를 참조할 수 있는 selector를 지정합니다.

data-close-trigger

  • event name
    • Dropdown 메뉴를 닫는 이벤트를 지정합니다.
    • default 설정 : data-open-trigger='click' / data-close-trigger='click' 또는 해당 엘리먼트 밖에서 임의의 클릭 발생 시 닫힘

data-dynamic-dropdown

목록으로 보여지는 데이터 목록을 동적으로 생성하고자 할 때 사용합니다.
상위 엘리먼트 영역에 의해 데이터 목록이 가려지는 경우에 사용합니다.

  • "true"
    • 목록이 열리는 시점에 document.body 영역에 데이터 목록 객체가 생성되고, close 되는 시점에 삭제됩니다.
  • selector
    • 목록이 열리는 시점에 데이터 목록 객체를 생성하여 추가할 영역 엘리먼트의 selector을 지정합니다.
    • ex) data-dynamic-dropdown="#divId"
<button class="Button">button</button>
<ul class="Dropdown" data-dynamic-dropdown="true">
	<li><a>option 1</a></li>
	<li><a>option 2</a></li>
	<li><a>option 3</a></li>
	<li><a>option 4</a></li>
</ul>

data-open-trigger

  • event name
    • Dropdown 메뉴를 여는 이벤트를 지정합니다.
    • default 설정 : data-open-trigger='click' / data-close-trigger='click' 또는 해당 엘리먼트 밖에서 임의의 클릭 발생 시 닫힘

data-position

  • top | bottom | left | right
    • tooltip의 위치를 지정하는 속성입니다. base 엘리먼트를 기준으로 정해지는 위치입니다.
    • 이 속성이 지정되지 않는 경우에는 bottom > top > left > right 순으로 화면을 벗어나지 않는 위치가 지정됩니다. (default 값은 bottom 입니다.)

Options

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

base

closetrigger

dynamicdropdown

opentrigger

position

Functions

.addHandler(callback)

드랍다운 메뉴의 옵션이 선택될 경우 호출되는 콜백함수를 등록합니다.

  • parameter
    • callbackHandler {function} Required

Button 위젯과 Dropdown 위젯을 활용하여 HTML select 엘리먼트을 구현한 예제입니다. 또한 이 예제와 동일한 형태가 'dropdownbutton' 이름으로 제공됩니다.

<button class="Button" id="dropdownBtn">Dropdown</button>
<ul id="dropdown2" class="Dropdown">
	<li><a>option 1</a></li>
	<li><a>option 2</a></li>
	<li><a>option 3</a></li>
	<li><a>option 4</a></li>
</ul>
<button class="Dropdownbutton">Dropdownbutton</button>
<ul class="Dropdown">
	<li><a>option 1</a></li>
	<li><a>option 2</a></li>
	<li><a>option 3</a></li>
	<li><a>option 4</a></li>
</ul>
$('#dropdown2').addHandler(function(e){
	var menu = e.data.element; // 드랍다운 메뉴 위젯 엘리먼트를 위와 같이 지정할 수 있습니다.
	var li = e.currentTarget; // 드랍다운 메뉴 옵션(li 태그)
	var text = $(li).text();
	if(menu.base.update != "false") {
		$(menu.base).text(text);
	}
});

.close()

드랍다운 메뉴를 닫는 API입니다.

.getDataSource()

드랍다운 메뉴에서 .setDataSource(data) API를 통해 데이터를 지정한 경우에 대하여, 해당 데이터를 가져옵니다.

.getOptions()

Dropdown에 설정된 옵션값을 모두 가져올 수 있습니다.

  • Return {object}
    • object
      • Dropdown에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
//Dropdown에 설정된 모든옵션값을 가져옵니다.
$('#Dropdown').getOptions();

.open()

정적 element를 base로 하여 드랍다운 메뉴를 여는 API입니다.
data-base 속성에 설정된 대상 element가 정적 element에 해당합니다.
data-base 속성을 사용하지 않은 경우는 base element는 Dropdown 컴포넌트 이전의 element를 지칭합니다.

.open(selector)

지정한 요소를 Base로 동적 설정 하여 드랍다운 메뉴를 여는 API입니다.

  • parameter
    • selector {string} Optional

.select(target)

드랍다운 메뉴를 동적 선택 합니다.
.select(0) 과 같이 integer 타입을 사용한 경우, 0번째 요소가 동적 선택 됩니다.
.select({id: "opt1"}) 과 같이 object 타입으로 id 정보를 넘길 경우, 해당 id를 갖는 요소가 동적 선택 됩니다.
.addHandler() 를 통해 선택한 요소에 대한 텍스트 값을 바꿀 수 있습니다.

  • parameter
    • target {integer|object} Required

.setDataSource(data)

드랍다운 메뉴의 데이터를 지정합니다.

  • parameter
    • data {array} Required

.setOptions(options)

Dropdown에 동적으로 옵션을 설정합니다.

  • Parameters
    • options {object}
      • Dropdown에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
$('#Dropdown').setOptions({
	base: '#menu',
	closetrigger: 'mouseover'
});

.toggle()

드랍다운 메뉴를 toggle하는 API입니다.