Component
Button
Basic
Button 컴포넌트 입니다. class="Button"
사용 가능한 HTML element 목록: <button> <a> <input>
<button class="Button">Button Tag로 된 Button</button>
<a class="Button">a Tag로 된 Button</a>
<input class="Button" value="input Tag로 된 Button">
Attributes
class
- Type: {string}
- class="Button Toggle" 속성을 추가하면 버튼을 체크박스처럼 사용할 수 있습니다.
<button class="Button Toggle" id="buttonTest01">Button</button>
data-disabled
- “true”
- 마크업으로 버튼을 비활성화
<button class="Button" data-disabled="true" id="buttonTest03">Button</button>
data-on / data-off
Toggle과 함께 data-on="on시 텍스트", data-off="off시 텍스트" 속성을 추가하면 'on/off'시 버튼의 텍스트 를 지정할 수 있습니다.
(<button> 태그 사이에 적은 버튼명은 무시됩니다.)
<button class="Button Toggle" data-on="ON" data-off="OFF" id="buttonTest02">Button</button>
type
- "button"
- IE8에서는 필수적으로 명시되어야 하는 속성입니다. 그 외 브라우저에서는 필요치 않습니다.
<button class="Button" type="button" id="buttonTest04">IE8 Button</button>
Options
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
on
- data-on 참고
off
- data-off 참고
disabled
Functions
.getOptions()
Button에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Button에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Button에 설정된 모든옵션값을 가져옵니다.
$('#Button').getOptions();
.isChecked ()
토글 버튼 사용 시 체크 상태를 확인하는 함수입니다.
<button id="button4" class="Button Toggle" data-on="CHECKED" data-off="UNCHECKED">Button</button>
<span id="span1"></span><button id="btn_isChecked" class="Button">isChecked()</button>
$("#btn_isChecked").on("click", function (){
var isCHK = $("#button4").isChecked();
isCHK = isCHK? "체크됨":"체크안됨";
$('#span1').text(isCHK);
});
.setChecked (isChecked)
토글 버튼을 사용할 시 체크 상태를 동적으로 변경하는 함수입니다.
- parameter
- isChecked {Boolean} Required
- 설정된 값에 의해서 버튼이 체크/체크해제됩니다.
- isChecked {Boolean} Required
<button id="button2" class="Button Toggle" data-on="CHECKED" data-off="UNCHECKED">Button</button>
<button id="btn_setChecked" class="Button Toggle" data-on="setChecked(false)" data-off="setChecked(true)">setChecked</button>
$("#btn_setChecked").on("click", function(){
var $toggleBtn = $("#button2");
if ($toggleBtn.isChecked()) {
$toggleBtn.setChecked(false);
} else {
$toggleBtn.setChecked(true);
}
});
$("#button2").on("click", function (){
$("#btn_setChecked").toggleChecked();
});
.setEnabled (isEnabled)
버튼의 활성화/비활성화를 동적으로 조정할 때 사용하는 함수입니다.
- parameter
- isEnabled {Boolean} Required
- 설정된 값에 의해서 버튼이 활성화/비활성화 됩니다.
- isEnabled {Boolean} Required
<button id="button1" class="Button">Button</button>
<button id="btn_setEnabled" class="Button Toggle" data-on="setEnabled(true)" data-off="setEnabled(false)">setEnabled</button>
$("#btn_setEnabled").on("click", function (){
var $disabledBtn = $("#button1");
if ($disabledBtn.getEnabled() !== true) {
$disabledBtn.setEnabled(true);
} else {
$disabledBtn.setEnabled(false);
}
});
.setOptions(options)
Button에 동적으로 옵션을 설정합니다.
- Parameters
- options {object}
- Button에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
- options {object}
$('#Button').setOptions({
on: 'ON',
disabled: true
});
.toggleChecked ()
토글 버튼 사용 시 체크 상태를 동적으로 변경하는 함수입니다.
<button id="button3" class="Button Toggle" data-on="CHECKED" data-off="UNCHECKED">Button</button>
<button id="btn_toggleChecked" class="Button">toggleChecked()</button>
$("#btn_toggleChecked").on("click", function (){
$("#button3").toggleChecked();
});