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

- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)