Bootstrap 按钮（Button）插件

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