按鈕可以完成很多工作?？刂瓢粹o狀態(tài)或創(chuàng)建按鈕組可以產(chǎn)生類似工具條之類的復(fù)雜組件。

狀態(tài)

通過(guò)添加 data-loading-text=" 正在加載..."可以使按鈕呈現(xiàn)加載狀態(tài)。

<button type="button" id="fat-btn" data-loading-text="正在加載..." class="btn btn-primary"> Loading state </button>

不過(guò)如果想啟用加載的狀態(tài)，還需要在點(diǎn)擊按鈕的時(shí)候進(jìn)行手動(dòng)啟動(dòng)。

 <script type="text/javascript"> $('#fat-btn').click(function () { var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
          btn.button('reset')
        }, 3000)
      }) </script>

上面的 JavaScript 代碼，首先是設(shè)置讓按鈕處于加載狀態(tài)，然后通過(guò) SetTimeout 定時(shí)三秒中定義事件，讓按鈕回到初始化狀態(tài)。

然后看一下點(diǎn)擊按鈕之后的效果

http://wiki.jikexueyuan.com/project/bootstrap/images/bt2.gif" alt="" />

狀態(tài)切換

通過(guò)添加 data-toggle="button" 可以讓按鈕能夠切換狀態(tài)。

<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>

http://wiki.jikexueyuan.com/project/bootstrap/images/bt3.gif" alt="" />

感覺(jué)按鈕的顏色還是有些許的變化的。

選擇框

通過(guò)向按鈕組添加 data-toggle="buttons" 可以使按鈕組具有類似選擇框的選擇/取消功能。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1 </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2 </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3 </label>
</div>

http://wiki.jikexueyuan.com/project/bootstrap/images/bt4.gif" alt="" />

單選

通過(guò)向按鈕組添加 data-toggle="buttons" 可以讓按鈕組具有單選框的功能。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1 </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2 </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3 </label>
</div>

http://wiki.jikexueyuan.com/project/bootstrap/images/bt5.gif" alt="" />

這個(gè)可只有單選的效果吧。

用法

<button class="btn btn-primary" id="btn" data-toggle="button">單獨(dú)開關(guān)</button>
    <a href="javascript:void(0)" class="btn btn-success" onClick="_switch()">切換</a>

上面我們只是通過(guò) data 屬性來(lái)切換按鈕的狀態(tài)，現(xiàn)在我們來(lái)用 JavaScript 來(lái)實(shí)現(xiàn)。

<script type="text/javascript"> function Switch()
      {
          $("#btn").button('toggle');
          } </script>

http://wiki.jikexueyuan.com/project/bootstrap/images/bt6.gif" alt="" />

標(biāo)記

按鈕插件完整支持 data 屬性。通過(guò)下面的案例可以看到各種使用方式。

方法

$().button('toggle')

切換按鈕狀態(tài)。賦予按鈕被激活時(shí)的狀態(tài)和外觀。

自動(dòng)切換

可以使用 data-toggle 屬性讓按鈕具有自動(dòng)切換狀態(tài)的能力。

<button type="button" class="btn" data-toggle="button">...</button>

上面已經(jīng)有實(shí)例了，在此我就簡(jiǎn)單的舉個(gè)例子。

$().button('loading')

設(shè)置按鈕狀態(tài)為 loading - 即將按鈕置為禁用狀態(tài)并將文字內(nèi)容切換為 loading。通過(guò)使用 data-loading-text 可以在按鈕元素上定義 loading 文本。

<button type="button" class="btn" data-loading-text="loading stuff...">...</button>

這個(gè)效果上面也有了。

跨瀏覽器兼容性

Firefox 會(huì)在多個(gè)頁(yè)面加載之間保持按鈕的禁用狀態(tài)?？梢酝ㄟ^(guò)添加 autocomplete="off" 來(lái)解決提到的問(wèn)題。

$().button('reset')

重置按鈕狀態(tài) - 并將按鈕上的文本還原為原始值。

$().button(string)

重置按鈕狀態(tài) - 并將按鈕上的文本重置為傳入的值。

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script> $('.btn').button('complete') </script>