Component
DropdownButton
DropdownButton 컴포넌트는 버튼에 class="Dropdownbutton"
을 입력하여
DropDown 컴포넌트와 동일한 동작을 수행하는 컴포넌트입니다.
<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>
data-close-trigger
- {event name}
- Dropdown를 닫는 이벤트를 지정합니다.
- default 설정 : data-open-trigger='click' / data-close-trigger='click' 또는 해당 엘리먼트 밖에서 임의의 클릭 발생 시 닫힘
<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
목록으로 보여지는 데이터 목록을 동적으로 생성하고자 할 때 사용합니다.
상위 엘리먼트 영역에 의해 데이터 목록이 가려지는 경우에 사용합니다.
- "true"
- 목록이 열리는 시점에 document.body 영역에 데이터 목록 객체가 생성되고, close 되는 시점에 삭제됩니다.
- selector
- 목록이 열리는 시점에 데이터 목록 객체를 생성하여 추가할 영역 엘리먼트의 selector을 지정합니다.
- ex) data-dynamic-dropdown="#divId"
<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' 또는 해당 엘리먼트 밖에서 임의의 클릭 발생 시 닫힘
<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 순으로 화면을 벗어나지 않는 위치가 지정됩니다.
<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>
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
closetrigger
dynamicdropdown
opentrigger
position
.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()
Dropdownbutton에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Dropdownbutton에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Dropdownbutton에 설정된 모든옵션값을 가져옵니다.
$('#Dropdownbutton').getOptions();
.getText()
드랍다운버튼의 선택된 텍스트를 동적으로 가져옵니다.
- return
- text {string}
<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)
Dropdownbutton에 동적으로 옵션을 설정합니다.
- Parameters
- options {object}
- Dropdownbutton에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
- options {object}
$('#Dropdownbutton').setOptions({
closetrigger: 'mouseleave',
opentrigger: 'dblclick'
});
.setText(text)
드랍다운버튼의 텍스트를 동적으로 설정합니다.
- parameter
- text {string} Required
<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);
}
});