Bootstrap - 按鈕外掛

按鈕在章節Bootstrap 按鈕中進行了說明。使用此外掛，您可以新增一些互動，例如控制按鈕狀態或建立按鈕組以用於更多元件（如工具欄）。

如果您想單獨包含此外掛功能，則需要 button.js。否則，如章節Bootstrap 外掛概述中所述，您可以包含 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()

選項

沒有選項。

方法

以下是按鈕外掛的一些有用方法：

$().button('toggle')

$().button('loading')

$().button('reset')

$().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>