[bootstrap] 부트스트랩 – 버튼 상태 제어하기

버튼을 클릭하면 “Loading…”이라는 메시지가 버튼에 나타납니다. 데이터 속성으로 data-loading-text=”Loading…”을 추가하고 크로스 브라우저 호환성을 위해 autocomplete=”off” 속성을 추가합니다.

<button type=”button” id=”myButton” data-loading-text=”Loading…“ class=”btn btn-primary” autocomplete=”off“>
Loading state
</button>

 

자바스크립트는 다음과 같은 형태로 사용합니다. 주석 부분에 실제 작업이 이뤄지는 코드가 들어가고 종료되면 리셋됩니다.

$(‘#myButton’).on(‘click’, function () {
var $btn = $(this).button(‘loading‘);
// business logic…
$btn.button(‘reset‘);
});

 

여기서는 테스트를 위해 다음의 코드를 사용합니다. 클릭하면 로딩 텍스트가 나타나고 3초가 지나면 원래의 버튼 텍스트가 됩니다.

$(‘#myButton’).on(‘click’, function () {
var $btn = $(this).button(‘loading‘);
setTimeout(function () {
$btn.button(‘reset’);
}, 3000);
});