本文主要來學習一下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>
總結
這就是按鈕插件的簡單應用。