メソッド Methods
ボタン（button.js）におけるメソッド。
メソッド一覧表
| メソッド名 | 説明 |
|---|---|
| toggle |
クリック毎に２つの状態を交互に切り換える。 |
| reset |
ボタンの状態をリセットする。 置き換えたボタン名を元に戻す。 |
| 文字列 |
ボタンをクリックすると、文字列を含むデータ属性（data-文字列-text）に指定した値のテキストに、ボタン名を置き換える。 |
toggleメソッド
サンプル
ソースコード
HTML
<button type="button" id="sampleButton2" class="btn btn-default" autocomplete="off"> サンプル </button>
JavaScript
$(function () {
$('#sampleButton2').click(function(){
$(this).button('toggle');
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。
resetメソッド
３秒後に元のボタン名に戻すサンプル。
サンプル
ソースコード
HTML
<button type="button" id="sampleButton3" data-loading-text="実行中" class="btn btn-default" autocomplete="off"> サンプル </button>
JavaScript
$(function () {
$('#sampleButton3').click(function(){
$(this).button('loading').delay(3000).queue(function() {
$(this).button('reset');
});
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。
文字列メソッド（loading）
サンプル
ソースコード
HTML
<button type="button" id="sampleButton4" class="btn btn-default" data-loading-text="実行中" autocomplete="off">
サンプル
</button>
JavaScript
$(function () {
$('#sampleButton4').on('click', function () {
$(this).button('loading');
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。
文字列メソッド（任意の文字列）
サンプル
ソースコード
HTML
<button type="button" id="sampleButton5" class="btn btn-default" data-process-text="実行中" data-complete-text="完了" autocomplete="off"> サンプル </button>
JavaScript
$(function () {
$('#sampleButton5').on('click', function () {
$(this).attr( 'disabled', 'disabled' ).button('process').delay(3000).queue(function() {
$(this).button('complete');
});
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。