ブートストラップ-ボタンプラグイン

ボタンについては、「ブートストラップボタン」の章で説明されています。このプラグインを使用すると、コントロールボタンの状態などのインタラクションを追加したり、ツールバーなどのコンポーネント用のボタンのグループを作成したりできます。

このプラグイン機能を個別に含めたい場合は、 button.js。それ以外の場合は、「ブートストラッププラグインの概要」の章で説明したように 、bootstrap.jsまたは縮小された bootstrap.min.jsを含めることができます 。

読み込み状態

ボタンに読み込み状態を追加するには、単に data-loading-text = "Loading..." 次の例に示すように、ボタン要素の属性として-

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

<script>
   $(function() { 
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

ボタンをクリックすると、出力は次の画像のようになります-

シングルトグル

1つのボタンでトグルをアクティブにするには(つまり、ボタンの通常の状態をプッシュ状態に、またはその逆に変更するには)、 data-toggle = "button" 次の例に示すように、ボタン要素の属性として-

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

チェックボックス

データ属性を追加するだけで、チェックボックスのグループを作成し、それに切り替えを追加できます data-toggle = "buttons"btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

無線

同様に、データ属性を追加するだけで、無線入力のグループを作成し、それにトグルを追加できます。 data-toggle = "buttons"btn-group

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>

使用法

ボタンプラグインを有効にできます via JavaScript 以下に示すように-

$('.btn').button()

オプション

オプションはありません。

メソッド

以下に、ボタンプラグインの便利な方法のいくつかを示します-

方法 説明

button( 'toggle')

プッシュ状態を切り替えます。ボタンがアクティブになっているように見せます。を使用してボタンの自動切り替えを有効にすることもできますdata-toggle 属性。

$().button('toggle')

.button( 'loading')

ロードすると、ボタンが無効になり、テキストがからオプションに変更されます。 data-loading-text ボタン要素の属性

$().button('loading')

.button( 'reset')

ボタンの状態をリセットし、元のコンテンツをテキストに戻します。このメソッドは、ボタンをプライマリ状態に戻す必要がある場合に役立ちます

$().button('reset')

.button(string)

このメソッドの文字列は、ユーザーが宣言した文字列を参照しています。ボタンの状態をリセットして新しいコンテンツを取り込むには、この方法を使用します。

$().button(string)

次の例は、上記の方法の使用法を示しています。

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });
   
   $(function() { 
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   
   $(function() { 
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
   });  
   
   $(function() { 
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
   }); 
</script>