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>