Bootstrap 按钮插件 ( Button )
Bootstrap 按钮插件 ( Button ) 可以在 Bootstrap 按钮 基础上添加一些交互，比如控制按钮状态，或者为其它组件 (如工具栏 ) 创建按钮组
加载状态
属性 data-loading-text="加载中..." 用来向按钮添加加载状态
<button id="fat-btn" class="btn btn-primary" data-loading-text="加载中..." type="button"> 加载状态 </button> <script> $(function() { $(".btn").click(function(){ $(this).button('loading').delay(2000).queue(function() { $(this).button('reset'); $(this).dequeue(); }); }); }); </script>
运行以上范例，输出结果如下
单个切换
属性 data-toggle="button" 可以激活单个按钮的切换，即改变按钮的正常状态为按压状态，反之亦然
<button type="button" class="btn btn-primary" data-toggle="button"> 单个切换 </button>
运行以上范例，输出结果如下
复选框( Checkbox )
属性 data-toggle="buttons" 可以用来创建复选框组并实现复选框组的切换
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox"> 选项 1 </label> <label class="btn btn-primary"> <input type="checkbox"> 选项 2 </label> <label class="btn btn-primary"> <input type="checkbox"> 选项 3 </label> </div>
运行以上范例，输出结果如下
单选按钮( Radio )
属性 data-toggle="buttons" 可以用来创建单选按钮组并实现单选按钮组的切换
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-info"> <input type="radio" name="options" id="option1"> 选项 1 </label> <label class="btn btn-info"> <input type="radio" name="options" id="option2"> 选项 2 </label> <label class="btn btn-info"> <input type="radio" name="options" id="option3"> 选项 3 </label> </div>
运行以上范例，输出结果如下
按钮插件使用方法
可以 通过 JavaScript 启用按钮( Button ) 插件
$('.btn').button()
方法
下表列出了按钮插件 ( Button ) 可以使用的方法
| 方法 | 描述 |
|---|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观 可以使用 data-toggle 属性启用按钮的自动切换 |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值 |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容 想要把按钮返回为原始的状态时，该方法非常有用 |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串 使用该方法，重置按钮状态，并添加新的内容 |
下面的范例演示了上面列出的方法的使用
<h2>点击每个按钮查看方法效果</h2> <h4>演示 .button('toggle') 方法</h4> <div id="myButtons1" class="bs-example"> <button type="button" class="btn btn-primary">原始</button> </div> <h4>演示 .button('loading') 方法</h4> <div id="myButtons2" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">原始 </button> </div> <h4>演示 .button('reset') 方法</h4> <div id="myButtons3" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">原始 </button> </div> <h4>演示 .button(string) 方法</h4> <button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished">请点击我 </button> <script> $(function(){ $("#myButtons1 .btn").click(function(){$(this).button('toggle');}); $("#myButtons2 .btn").click(function(){$(this).button('loading').delay(1000).queue(function(){});}); $("#myButtons3 .btn").click(function(){$(this).button('loading').delay(1000).queue(function(){$(this).button('reset');});}); $("#myButton4").click(function(){$(this).button('loading').delay(1000).queue(function(){$(this).button('complete');});}); }); </script>
运行以上范例，输出结果如下
