Bootstrap基本插件學(xué)習(xí)筆記之按鈕(21)
前面已經(jīng)介紹過(guò)Button的使用。通過(guò)button按鈕,我們還能實(shí)現(xiàn)一些諸如按鈕狀態(tài)控制等形式的交互。
0x01 加載狀態(tài)
添加data-loading-text=”Loading…”屬性:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>按鈕交互</title> </head> <body> <div class="container"> <div class="page-header"> <h1>按鈕交互</h1> </div> <button id="btnLoad" type="button" class="btn btn-primary" data-loading-text="Loading..."> 加載狀態(tài) </button> <script> $(function () { $("#btnLoad").click(function () { $(this).button('loading').delay(1000).queue( function () { $(this).button('reset'); $(this).dequeue(); } ) }) }) </script> </div> </body> </html>
效果如下:
$("#btnLoad").click(function () { $(this).button('loading').delay(1000).queue( function () { $(this).button('reset'); $(this).dequeue(); } ) })
loading狀態(tài)持續(xù)1s后,將會(huì)執(zhí)行reset,恢復(fù)原始狀態(tài)。
0x02 復(fù)選框
設(shè)置data-toggle為”buttons”可以實(shí)現(xiàn)復(fù)選框按鈕組的效果:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>復(fù)選框按鈕組</title> </head> <body> <div class="container"> <div class="page-header"> <h1>復(fù)選框按鈕組</h1> </div> <div class="btn-group" data-toggle="buttons"> <button class="btn btn-default"> <input type="checkbox">選項(xiàng)1 </button> <button class="btn btn-default"> <input type="checkbox">選項(xiàng)2 </button> <button class="btn btn-default"> <input type="checkbox">選項(xiàng)3 </button> </div> </div> </body> </html>
效果如下:
0x03 單選按鈕
類似地:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>單選按鈕</title> </head> <body> <div class="container"> <div class="page-header"> <h1>單選按鈕</h1> </div> <div class="btn-group" data-toggle="buttons"> <button class="btn btn-default"> <input type="radio" name="radio">選項(xiàng)1 </button> <button class="btn btn-default"> <input type="radio" name="radio">選項(xiàng)2 </button> <button class="btn btn-default"> <input type="radio" name="radio">選項(xiàng)3 </button> </div> </div> </body> </html>
效果如下:
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Javascript中值得學(xué)習(xí)的特性總結(jié)
本文主要介紹了一些Javascript中值得學(xué)習(xí)的特性,可選鏈操作符,空值合并運(yùn)算符,Promise.allSettled(),BigInt類型等特性,文中有詳細(xì)的代碼示例介紹這些特性,感興趣的可以參考下2023-05-05JS使用正則表達(dá)式驗(yàn)證身份證號(hào)碼
這篇文章主要介紹了JS使用正則表達(dá)式驗(yàn)證身份證號(hào)碼的相關(guān)資料,需要的朋友可以參考下2017-06-06JavaScript利用Date實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)實(shí)例
在日常開(kāi)發(fā)的時(shí)候經(jīng)常遇到關(guān)于倒計(jì)時(shí)的需求,下面這篇文章就給主要介紹了JavaScript利用Date實(shí)現(xiàn)倒計(jì)時(shí)效果的方法示例,文中主要實(shí)現(xiàn)了倒計(jì)時(shí)和倒計(jì)時(shí)結(jié)束搶購(gòu)的按鈕才可以被點(diǎn)擊的效果,有需要的朋友可以參考借鑒。2017-01-01javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例
這篇文章主要為大家介紹了javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JS實(shí)現(xiàn)IE狀態(tài)欄文字縮放效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)IE狀態(tài)欄文字縮放效果代碼,涉及JavaScript針對(duì)瀏覽器的相關(guān)調(diào)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript & jQuery完美判斷圖片是否加載完畢
本文主要介紹了JavaScript & jQuery完美判斷圖片是否加載完畢的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01Array棧方法和隊(duì)列方法的特點(diǎn)說(shuō)明
本篇文章主要是對(duì)Array棧方法與隊(duì)列方法的特點(diǎn)進(jìn)行了詳細(xì)的說(shuō)明介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速的方法詳解
在我們的日常生活中離不開(kāi)網(wǎng)絡(luò),而網(wǎng)絡(luò)的快慢直接決定了用戶的產(chǎn)品使用體驗(yàn)。本文就來(lái)帶大家了解如何用JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速,需要的可以參考一下2023-01-01