首頁 > web前端 > js教程 > Bootstrap每天必學之按鈕(Button)外掛程式_javascript技巧

Bootstrap每天必學之按鈕(Button)外掛程式_javascript技巧

WBOY
發布: 2016-05-16 15:04:09
原創
1708 人瀏覽過

按鈕(Button)在 Bootstrap 按鈕 一章中介紹過。透過按鈕(Button)插件,您可以添加進一些交互,例如控制按鈕狀態,或為其他元件(如工具列)建立按鈕組。

如果您想要單獨引用該外掛程式的功能,那麼您需要引用 button.js。或者,如 Bootstrap 外掛程式概覽 一章所提到,您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

一、載入狀態

如需在按鈕上新增載入狀態,只需簡單地在 button 元素中新增 data-loading-text="Loading..." 作為其屬性即可,如下面實例所示:

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>
登入後複製

二、單一切換

如需啟動單一按鈕的切換(即改變按鈕的正常狀態為按壓狀態,反之亦然),只需向button 元素添加data-toggle="button" 作為其屬性即可,如下面實例所示:

複製程式碼

程式碼如下:

注意:在 Firefox 多次頁面載入時,按鈕可能會保持表單的停用或選擇狀態。解決方案是:新增 autocomplete="off"。

三、單選按鈕
<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>  
登入後複製
類似地,您可以建立單選按鈕群組,並透過在 btn-group 新增 data 屬性 data-toggle="buttons" 來新增單選按鈕群組的切換。


                                                                     

四、復選按鈕

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>


登入後複製
您可以建立複選框組,並透過在 btn-group 中新增 data 屬性 data-toggle="buttons" 來新增複選框組的切換。


Button 外掛程式中的 button 方法中有三個參數: toggle、 reset、 string(例如 loading、complete)。
//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})
 

登入後複製

以下是一些按鈕(Button)插件中有用的方法:

以上就是本文的全部內容,希望對大家的學習有所幫助,更多關於Bootstrap內容如可以參考專題:Bootstrap學習教程
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板