Component

DropdownButton

Basic

DropdownButton 컴포넌트는 버튼에 class="Dropdownbutton" 을 입력하여
DropDown 컴포넌트와 동일한 동작을 수행하는 컴포넌트입니다.

option 1
option 2
option 3
option 4

<button class="Dropdownbutton">select</button>
<ul>
	<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>

Attributes

data-close-trigger

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

option 1
option 2
option 3
option 4

option 1
option 2
option 3
option 4

    <button class="Dropdownbutton">'click' open / 'double-click' close</button>
	<ul data-close-trigger="dblclick">
		<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">'mouseover' open / 'mouseleave' close</button>
	<ul data-open-trigger="mouseover" data-close-trigger="mouseleave">
		<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-dynamic-dropdown 3.0.5+

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

"true"
- 목록이 열리는 시점에 document.body 영역에 데이터 목록 객체가 생성되고, close 되는 시점에 삭제됩니다.
selector
- 목록이 열리는 시점에 데이터 목록 객체를 생성하여 추가할 영역 엘리먼트의 selector을 지정합니다.
- ex) data-dynamic-dropdown="#divId"

option 1
option 2
option 3
option 4

<button class="Dropdownbutton">dynamic-dropdown</button>
<ul 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' 또는 해당 엘리먼트 밖에서 임의의 클릭 발생 시 닫힘

option 1
option 2
option 3
option 4

<button class="Dropdownbutton">'double-click' open / 'click' close</button>
<ul data-open-trigger="dblclick">
	<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-position

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

option 1
option 2
option 3
option 4

option 1
option 2
option 3
option 4

option 1
option 2
option 3
option 4

<button class="Dropdownbutton">right</button>
<ul data-position="right">
	<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">top</button>
<ul data-position="top">
	<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">left</button>
<ul data-position="left">
	<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>

Options 3.0.0+

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

Functions

.addHandler(callback)

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

parameter
- callbackHandler {function} Required

$('#dropdownbutton').addHandler(function(e){
	var menu = e.data.element; // 드랍다운 메뉴 위젯 엘리먼트를 위와 같이 지정할 수 있습니다. 
	var li = e.currentTarget; // 드랍다운 메뉴 옵션(li 태그)
);

.getDataSource()

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

    <button id="dropdownbutton2" class="Dropdownbutton">DropDownButton</button>
	<ul></ul>

	<button id="btn_setDataSource2" class="Button">setDataSource(data)</button>
	<button id="btn_getDataSource2" class="Button">getDataSource()</button>

/***
 * id : li태그의 아이디 지정
 * text : a태그의 text로 지정.
 * link : a태그의 href로 지정.
 */
var data_getDataSource2 = [
	{id:"opt1", text: "Alopex UI", link: "https://ui.alopex.io/"},
	{id:"opt2", text: "Alopex Grid", link: "https://grid.alopex.io/"},
	{id:"opt3", text: "Alopex Dash", link: "https://dash.alopex.io/"}
];
$('#btn_setDataSource2').on('click', function() {
	$('#dropdownbutton2').setDataSource(data_getDataSource2);
});
$('#btn_getDataSource2').on('click', function() {
	var data = $('#dropdownbutton2').getDataSource();
	alert(JSON.stringify(data));
});

.getOptions() 3.0.0+

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

Return {object}
- object
  - Dropdownbutton에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.

//Dropdownbutton에 설정된 모든옵션값을 가져옵니다.
$('#Dropdownbutton').getOptions();

.getText()

드랍다운버튼의 선택된 텍스트를 동적으로 가져옵니다.

return
- text {string}

option 1
option 2
option 3
option 4

<button id="ddb2" class="Dropdownbutton">GET THIS</button>
<ul>
	<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>
<span id="span1"></span>
<button id="btn_getText" class="Button">getText()</button>

$('#btn_getText').on('click', function(){
	var text = $('#ddb2').getText();
	$('#span1').text(text);
});

.select(target)

드랍다운버튼 메뉴를 동적 선택 합니다.
.select(0) 과 같이 integer 타입을 사용한 경우, 0번째 요소가 동적 선택 됩니다.
.select({id: "opt1"}) 과 같이 object 타입으로 id 정보를 넘길 경우, 해당 id를 갖는 요소가 동적 선택 됩니다.

parameter
- target {integer|object} Required

    <button id="dropdownbutton_select" class="Dropdownbutton">DropDownButton</button>
	<ul></ul>
	<button id="btn_select_setDataSource" class="Button">setDataSource(data_select)</button>
	<button id="btn_select_integer" class="Button">.select( 3 )</button>
	<button id="btn_select_id" class="Button">.select( { id : "opt25" } )</button>

/***
 * id : li태그의 아이디 지정
 * text : a태그의 text로 지정.
 * link : a태그의 href로 지정.
 */
var data_select = [
	{id:"opt21", text: "선택 1"},
	{id:"opt22", text: "선택 2"},
	{id:"opt23", text: "선택 3"},
	{id:"opt24", text: "선택 4"},
	{id:"opt25", text: "선택 5"},
	{id:"opt26", text: "선택 6"}
];
$('#btn_select_setDataSource').on('click', function() {
	$('#dropdownbutton_select').setDataSource(data_select);
});

$('#btn_select_integer').on('click', function() {
	$('#dropdownbutton_select').select(3);
});
$('#btn_select_id').on('click', function() {
	$('#dropdownbutton_select').select({id: "opt25"});
});

.setDataSource(data)

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

parameter
- data {array} Required

<button id="dropdownbutton1" class="Dropdownbutton">DropDownButton</button>
<ul></ul>

<button id="btn_setDataSource" class="Button">setDataSource(data)</button>

var data = [
	{id:"opt1", text: "Alopex UI", link: "https://ui.alopex.io/"},
	{id:"opt2", text: "Alopex Grid", link: "https://grid.alopex.io/"},
	{id:"opt3", text: "Alopex Dash", link: "https://dash.alopex.io/"}
];
$('#btn_setDataSource').on('click', function(){
	$('#dropdownbutton1').setDataSource(data);
});

.setOptions(options) 3.0.0+

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

Parameters
- options {object}
  - Dropdownbutton에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.

$('#Dropdownbutton').setOptions({
	closetrigger: 'mouseleave',
	opentrigger: 'dblclick'
});

.setText(text)

드랍다운버튼의 텍스트를 동적으로 설정합니다.

parameter
- text {string} Required

option 1
option 2
option 3
option 4

<button id="ddb1" class="Dropdownbutton">select</button>
<ul>
	<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>
<input id="text1" class="Textinput" value="선택하세요">
<button id="btn_setText" class="Button">setText()</button>

$('#btn_setText').on('click', function(){
	var text = $('#text1').val();
	if(!text==""){
		$('#ddb1').setText(text);
	}
});

본문 상단으로 이동