Bootstrap3.0學習第二十四輪(JavaScript外掛程式——按鈕)__Java

本文主要來學習一下JavaScript外掛程式--按鈕。

按鈕

按鈕可以完成很多工作。控制按鈕狀態或建立按鈕組可以產生類似工具條之類的複雜組件。 狀態

通過添加data-loading-text="正在載入..."可以使按鈕呈現載入狀態。

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

不過如果想啟用載入的狀態，還需要在點擊按鈕的時候進行手動啟動。

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

上面的JavaScript代碼，首先是設定讓按鈕處於載入狀態，然後通過SetTimeout定時三秒中定義事件，讓按鈕回到初始化狀態。

如果你對SetTimeout不太清楚的話，可以看下我之前的一篇文章http://www.cnblogs.com/aehyok/archive/2013/04/16/3023840.html

然後看一下點擊按鈕之後的效果

狀態切換

通過添加data-toggle="button"可以讓按鈕能夠切換狀態。

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

感覺按鈕的顏色還是有些許的變化的。 選擇框

通過向按鈕組添加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>

單選

通過向按鈕組添加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>

這個可只有單選的效果吧。 用法

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

上面我們只是通過data屬性來切換按鈕的狀態，現在我們來用JavaScript來實現。

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

標記

按鈕外掛程式完整支援data屬性。通過下面的案例可以看到各種使用方式。 方法

$().button('toggle')

切換按鈕狀態。賦予按鈕被啟用時的狀態和外觀。 自動切換

可以使用data-toggle屬性讓按鈕具有自動切換狀態的能力。

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

上面已經有執行個體了，在此我就簡單的舉個例子。

$().button('loading')

設定按鈕狀態為loading - 即將按鈕置為禁用狀態並將文字內容切換為loading。通過使用data-loading-text可以在按鈕元素上定義loading文本。

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

這個效果上面也有了。

跨瀏覽器安全色性
Firefox會在多個頁面載入之間保持按鈕的禁用狀態。可以通過添加autocomplete="off"來解決提到的問題。

$().button('reset')

重設按鈕狀態 - 並將按鈕上的文本還原為原始值。

$().button(string)

重設按鈕狀態 - 並將按鈕上的文本重設為傳入的值。

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

總結

 這就是按鈕外掛程式的簡單應用。