Bootstrap3
日本語リファレンス

広告

状態を保持するボタン


ポイントは4つ。

  1. 状態を保持するボタンは、button要素のdata-***-text属性に状態を示すテキストを指定する。
  2. data-***-text属性の***には、任意の文字列を指定する。
  3. $(セレクター).button('***');メソッドを呼び出すことで、ボタンのテキストを、data-***-text属性に指定した値に置き換える。
  4. Firefox対策として、button要素のautocomplete属性にoffを指定する。

解除には、リセット・メソッドを使う。


サンプル

状態を保持するボタン:

ソースコード

HTML

<p>
	状態を保持するボタン:
	<button type="button" id="sampleButtonStateful" class="btn btn-primary" data-loading-text="実行中" autocomplete="off">
		サンプル
	</button>
</p>

JavaScript

$(function () {
	$('#sampleButtonStateful').on('click', function () {
		$(this).button('loading');
	});
});

このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。


広告