## 按鈕 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中的單選框使用方法相同，單擊按鈕組中的某個按鈕，該按鈕將被選中，其它按鈕將取消選中。被選中的按鈕以深色背景顯示，取消選中的按鈕以默認的淺色背景顯示。