## 按钮 button.js **状态提示** 通过自定义属性和简单的JavaScript，就可以让按钮具有状态提示功能。比如，没有点击按钮时，正常显示；点击按钮时，触发相应的状态，并显示该状态对应的文本信息。 **1.** 加载状态 要让按钮显示加载状态，首先要给按钮添加 data-loading-text 属性，它的值为加载状态要显示的文本信息，如 "Loading..."： ```html <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state </button> ```  还要为按钮定义单击事件，并在点击时调用 button('loading') 方法，来触发加载状态。代码如下： ```js $('.btn').click(function(){ $(this).button('loading'); }) ``` 当点击按钮时，会触发加载状态，按钮的文本会变成 data-loading-text 属性的值。加载过程中，按钮被自动禁用，它会变灰，不再响应单击。如下：  **2.** 自定义状态 按钮自定义任意状态，只需为按钮添加 data-xxx-text 属性，并在点击按钮时调用 button('xxx') 方法即可。例如，为按钮自定义 complete 状态，首先为按钮添加 data-complete-text 属性，属性的值为 complete 状态要显示的文本信息： ```html <button type="button" id="myButton" data-complete-text="complete..." class="btn btn-primary" autocomplete="off"> complete </button> ```  再为按钮定义单击事件，并在点击时调用 button('complete') 方法： ```js $('.btn').click(function(){ $(this).button('complete'); }) ```  **3.** 重置状态 如果想让按钮的文本回到最初的样子，可以调用 button('reset') 方法来重置按钮的状态，让它显示初始的文本。 ```js $('.btn').button('reset') ``` 如果没有为按钮定义 data-complete-text 属性，重置状态下会显示初始的文本，如果定义了 data-complete-text 属性，则显示 data-complete-text 属性指定的文本。 ***** **按钮状态切换** **1.** 通过data属性切换按钮状态 将单个按钮的 data-toggle 属性设置 button，或通过简单的JavaScript，就可以激活按钮的行为状态，让它在未激活和激活状态之间来回切换。 ```html <button class="btn btn-primary" data-toggle="button" autocomplete="off">Single Toggle</button> ``` 当单击时，会激活按钮，激活状态以深色背景显示。  再次单击时，按钮又回到默认状态，默认状态以浅色背景显示。  **2.** 通过JavaScript切换按钮状态 ```html <button class="btn btn-primary" >Single Toggle</button> ``` ```js $('.btn').click(function() { $(this).button('toggle'); }); ``` 注意：在实现状态切换功能时，不限制一定要用 button 元素，只要应用了 .btn 类，它可以是任何元素。 ***** **按钮组** 将按钮组放在特定的容器中，不必编写JavaScript代码，就可以让按钮组具有HTML的复选框（checkbox）或单选框（radio）的效果。 **1.** 复选按钮组 复选按钮组是类似于复选框的一组按钮，用户可以选择按钮组中的多个按钮。要添加这个功能，只需给 .btn-group 的按钮组容器添加 data-toggle="buttons " 属性，并将一组包含复选框的label元素放入容器中： ```html <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div> ``` 复选按钮组跟HTML中的复选框使用方法相同，单击按钮组中的某个按钮，按钮将被选中，再次单击，将取消选中。被选中的按钮以深色背景显示，取消选中的按钮以默认的浅色背景显示。  **2.** 单选按钮组 单选按钮组是类似于单选框的一组按钮，用户每次只能选择按钮组中的一个按钮。要添加这个功能，只需给 .btn-group 的按钮组容器添加 data-toggle="buttons-radio" 属性，并将一组包含单选按钮的label元素放入容器中： ```html <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 </label> </div> ``` 单选按钮组跟HTML中的单选框使用方法相同，单击按钮组中的某个按钮，该按钮将被选中，其它按钮将取消选中。被选中的按钮以深色背景显示，取消选中的按钮以默认的浅色背景显示。