button.js

ボタンを使用して様々なことを行います。 ツールバーのような複数のコンポーネントのために、ボタンの状態の制御やボタンのグループ作成を行います。

クロスブラウザ互換性
Firefoxはページ読み込みを跨いでフォーム要素の状態(disabled、checked)を持続してしまいます。 これを回避するには、autocomplete="off"を使用します。 詳細は、Mozilla bug #654072を参照してください。

• ボタンの状態
• 単一ボタンによる切り替え
• チェックボックス / ラジオボタン
• メソッド

ボタンの状態

ボタンをロード中の状態にするには、data-loading-text="Loading..."を追加します。

この機能はv3.3.5で非推奨となり、v4で削除されます。

Use whichever state you like! デモのために我々はdata-loading-textと$().button('loading')を使用していますが、 使用することが出来る状態はこれだけではありません。 後述する$().button(string)のドキュメントを参照してください。

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

単一ボタンによる切り替え

単一のボタンにdata-toggle="button"を追加して、切り替え(toggle)を有効にします。

予め切り替わった状態にするには、.activeとaria-pressed="true"が必要
予めボタンを切り替えるには、.activeクラスとaria-pressed="true"属性をボタンに、 開発者自身が追加しておく必要があります。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

チェックボックス / ラジオボタン

data-toggle="buttons"をチェックボックス、またはラジオボタンを含む.btn-groupへ追加すると、 それぞれに合った切り替えスタイルを有効にしてくれます。

予め選択しておくには.activeが必要
予め選択された状態にするには、開発者自身がinputのlabelに.activeクラスを追加しておく必要があります。

視覚的なcheckedの状態はクリックでのみ更新
もし、チェックボックスのボタンのcheckedの状態が、ボタンのクリックイベントの発火以外で更新された場合 (例えば、< input type="reset" >またはinputのcheckedプロパティの設定等)、 開発者自身がinputのlabelに.activeを追加する必要があります。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

メソッド

$().button('toggle')

ボタンの押下状態(ボタンが有効か否かの外観)を切り替えます。

$().button('reset')

ボタンの状態をリセットします。(テキストを本来のものに入れ替えます) このメソッドは非同期で、実際のリセットが完了する前に返されます(returnされます)。

$().button(string)

状態として定義されているボタンのテキストを、任意のデータと入れ替えます。

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // ボタンのテキストは"finished!"になります。
  })
</script>

 Back to top