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 3.0.0+

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

Functions

.getOptions() 3.0.0+

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

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

//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
  - 설정된 값에 의해서 버튼이 체크/체크해제됩니다.

<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
  - 설정된 값에 의해서 버튼이 활성화/비활성화 됩니다.

<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) 3.0.0+

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

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

$('#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();
});

본문 상단으로 이동