bootstrap switch開(kāi)關(guān)組件使用方法詳解
bootstrap中文網(wǎng)上有這么一個(gè)bootstrap-switch組件,很實(shí)用,看demo學(xué)習(xí)并記錄一下。
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=description content=""> <meta name=viewport content="width=device-width, initial-scale=1"> <title></title> <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> <link href="css/bootstrap-switch.min.css" rel="external nofollow" rel="stylesheet" /> <script src="js/jquery/jquery.1.11.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-switch.min.js"></script> </head> <body> <input name="status" type="checkbox" data-size="small"> <script type="text/javascript"> $('[name="status"]').bootstrapSwitch({ onText:"啟動(dòng)", offText:"停止", onColor:"success", offColor:"info", size:"small", onSwitchChange:function(event,state){ if(state==true){ alert('已打開(kāi)'); }else{ alert('已關(guān)閉'); } } }) </script> </body> </html>
Bootstrap-Switch源碼地址:https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch文檔以及Demo:http://www.bootstrap-switch.org/examples.html
常用的屬性
size:開(kāi)關(guān)大小??蛇x值有'mini', 'small', 'normal', 'large'
onColor:開(kāi)關(guān)中開(kāi)按鈕的顏色。可選值有'primary', 'info', 'success', 'warning', 'danger', 'default'
offColor:開(kāi)關(guān)中關(guān)按鈕的顏色??蛇x值'primary', 'info', 'success', 'warning', 'danger', 'default'
onText:開(kāi)關(guān)中開(kāi)按鈕的文本,默認(rèn)是“ON”。
offText:開(kāi)關(guān)中關(guān)按鈕的文本,默認(rèn)是“OFF”。
onInit:初始化組件的事件。
onSwitchChange:開(kāi)關(guān)變化時(shí)的事件。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用d3.js實(shí)現(xiàn)蜂巢圖表帶動(dòng)畫(huà)效果
這篇文章主要給大家介紹了關(guān)于如何利用d3.js實(shí)現(xiàn)蜂巢圖表帶動(dòng)畫(huà)效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用d3.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單路由器功能的方法,基于javascript模擬簡(jiǎn)單路由編碼的相關(guān)技巧,需要的朋友可以參考下2015-05-05javascript的var與let,const之間的區(qū)別詳解
這篇文章主要為大家介紹了?javascript的var與let,const之間的區(qū)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12詳解JS實(shí)現(xiàn)系統(tǒng)登錄頁(yè)的登錄和驗(yàn)證
這篇文章主要介紹了JS實(shí)現(xiàn)系統(tǒng)登錄頁(yè)的登錄和驗(yàn)證,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)
下面小編就為大家?guī)?lái)一篇js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法,分析了向setTimeout傳遞參數(shù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04跨域?yàn)g覽器設(shè)置解決前端跨域問(wèn)題
這篇文章主要為大家介紹了前端跨域?yàn)g覽器設(shè)置解決前端跨域問(wèn)題的方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07javascript匿名函數(shù)中的''return function()''作用
這篇文章主要介紹了javascript匿名函數(shù)中的'return function()'作用介紹,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10上傳文件返回的json數(shù)據(jù)會(huì)被提示下載問(wèn)題解決方案
這篇文章主要介紹了項(xiàng)目中python+js實(shí)現(xiàn)的上傳文件返回的json數(shù)據(jù)會(huì)被提示下載問(wèn)題解決方案,需要的朋友可以參考下2014-12-12