Bootstrap基本插件學(xué)習(xí)筆記之按鈕(21)
前面已經(jīng)介紹過Button的使用。通過button按鈕,我們還能實現(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后,將會執(zhí)行reset,恢復(fù)原始狀態(tài)。
0x02 復(fù)選框
設(shè)置data-toggle為”buttons”可以實現(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">選項1 </button> <button class="btn btn-default"> <input type="checkbox">選項2 </button> <button class="btn btn-default"> <input type="checkbox">選項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">選項1 </button> <button class="btn btn-default"> <input type="radio" name="radio">選項2 </button> <button class="btn btn-default"> <input type="radio" name="radio">選項3 </button> </div> </div> </body> </html>
效果如下:
如果大家還想深入學(xué)習(xí),可以點擊這里進(jìn)行學(xué)習(xí),再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Javascript中值得學(xué)習(xí)的特性總結(jié)
本文主要介紹了一些Javascript中值得學(xué)習(xí)的特性,可選鏈操作符,空值合并運(yùn)算符,Promise.allSettled(),BigInt類型等特性,文中有詳細(xì)的代碼示例介紹這些特性,感興趣的可以參考下2023-05-05JavaScript利用Date實現(xiàn)簡單的倒計時實例
在日常開發(fā)的時候經(jīng)常遇到關(guān)于倒計時的需求,下面這篇文章就給主要介紹了JavaScript利用Date實現(xiàn)倒計時效果的方法示例,文中主要實現(xiàn)了倒計時和倒計時結(jié)束搶購的按鈕才可以被點擊的效果,有需要的朋友可以參考借鑒。2017-01-01javascript算法解數(shù)獨實現(xiàn)方案示例
這篇文章主要為大家介紹了javascript算法解數(shù)獨實現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08JavaScript & jQuery完美判斷圖片是否加載完畢
本文主要介紹了JavaScript & jQuery完美判斷圖片是否加載完畢的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01JavaScript實現(xiàn)網(wǎng)絡(luò)測速的方法詳解
在我們的日常生活中離不開網(wǎng)絡(luò),而網(wǎng)絡(luò)的快慢直接決定了用戶的產(chǎn)品使用體驗。本文就來帶大家了解如何用JavaScript實現(xiàn)網(wǎng)絡(luò)測速,需要的可以參考一下2023-01-01