Bootstrap-button-plugin

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

ボタンについては、リンク：/bootstrap/bootstrap_buttons [Bootstrap Buttons]で説明されています。 このプラグインを使用すると、コントロールボタンの状態などの相互作用を追加したり、ツールバーなどのコンポーネントのボタンのグループを作成したりできます。

'_このプラグイン機能を個別に含める場合は、 button.js が必要です。 または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_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>

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

シングルトグル

トグルを有効にするには（つまり、 ボタンの通常の状態をプッシュ状態に、またはその逆に変更します）、単一のボタンで、次の例に示すように、ボタン要素に属性として 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>

使用法

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

$('.btn').button()

オプション

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

方法

以下にボタンプラグインの便利なメソッドの一部を示します-

Method	Description	Example
button('toggle')	Toggles push state. Gives the button the appearance that it has been activated. You can also enable auto toggling of a button by using the *data-toggle *attribute.	$().button('toggle')
.button('loading')	When loading, the button is disabled and the text is changed to the option from the* data-loading-text* attribute of button element	$().button('loading')
.button('reset')	Resets button state, bringing the original content back to the text. This method is useful when you need to return the button back to the primary state	$().button('reset')
.button(string)	String in this method is referring to any string declared by the user. To reset the button state and bring in new content use this method.	$().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>