Radio

버튼 컴포넌트는 하나만 선택할 수 있는 라디오 타입을 제공합니다.

View Result Test Code Description
alert(btn_radio_1.getValue()); 현재 선택된 버튼의 값을 출력
btn_radio_2.setIndex(3); 해당 인덱스의 버튼을 선택 상태로 변경
A B C
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);
});

Check

버튼 컴포넌트는 다수를 선택할 수 있는 체크 타입을 제공합니다.

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);