버튼 컴포넌트는 하나만 선택할 수 있는 라디오 타입을 제공합니다.
View | Result | Test Code | Description |
alert(btn_radio_1.getValue()); | 현재 선택된 버튼의 값을 출력 | ||
btn_radio_2.setIndex(3); | 해당 인덱스의 버튼을 선택 상태로 변경 | ||
btn_radio_3.setValue("gear"); | 해당 값의 버튼을 선택 상태로 변경 |
아래는 라디오 버튼을 생성하는 코드입니다.
<div id="btn_radio_1" class="group">
<a class="btn small" value="true">On</a>
<a class="btn small" value="false">Off</a>
</div>
...
jui.ready(function(ui, uix, _) {
var btn_radio_options = {
type: "radio",
event: {
change: function(data) {
alert("index(" + data.index + "), value(" + data.value + ")");
}
}
};
btn_radio_1 = ui.button("#btn_radio_1", btn_radio_options);
btn_radio_2 = ui.button("#btn_radio_2", btn_radio_options);
btn_radio_3 = ui.button("#btn_radio_3", btn_radio_options);
});
버튼 컴포넌트는 다수를 선택할 수 있는 체크 타입을 제공합니다.
View | Result | Test Code | Description |
btn_check.setIndex([ 3, 4 ]); | 해당 인덱스를 가지는 버튼들을 선택 상태로 변경 | ||
btn_check_2.setValue([ 'check', 'edit' ]); | 해당 값을 가지는 버튼들을 선택 상태로 변경 |
아래는 체크 버튼을 생성하는 코드입니다.
<div id="btn_check" class="group">
<a class="btn mini" value="check"><i class="icon-check"></i></a>
<a class="btn mini" value="plus"><i class="icon-plus"></i></a>
<a class="btn mini" value="edit"><i class="icon-edit"></i></a>
<a class="btn mini" value="home"><i class="icon-home"></i></a>
<a class="btn mini" value="gear"><i class="icon-gear"></i></a>
</div>
...
var btn_check_options = {
type: "check",
event: {
change: function(data) {
var result = "";
for(var i = 0; i < data.length; i++) {
if(data[i] != null) {
result += "index(" + data[i].index + "), value(" + data[i].value + ")" + "\n";
}
}
alert(result);
}
}
};
btn_check = ui.button("#btn_check", btn_check_options);
btn_check_2 = ui.button("#btn_check_2", btn_check_options);