bootstrap switch開關(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('已打開');
}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:開關(guān)大小??蛇x值有'mini', 'small', 'normal', 'large'
onColor:開關(guān)中開按鈕的顏色。可選值有'primary', 'info', 'success', 'warning', 'danger', 'default'
offColor:開關(guān)中關(guān)按鈕的顏色。可選值'primary', 'info', 'success', 'warning', 'danger', 'default'
onText:開關(guān)中開按鈕的文本,默認(rèn)是“ON”。
offText:開關(guān)中關(guān)按鈕的文本,默認(rèn)是“OFF”。
onInit:初始化組件的事件。
onSwitchChange:開關(guān)變化時(shí)的事件。


以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用d3.js實(shí)現(xiàn)蜂巢圖表帶動(dòng)畫效果
這篇文章主要給大家介紹了關(guān)于如何利用d3.js實(shí)現(xiàn)蜂巢圖表帶動(dòng)畫效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用d3.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
javascript的var與let,const之間的區(qū)別詳解
這篇文章主要為大家介紹了?javascript的var與let,const之間的區(qū)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12
詳解JS實(shí)現(xiàn)系統(tǒng)登錄頁的登錄和驗(yàn)證
這篇文章主要介紹了JS實(shí)現(xiàn)系統(tǒng)登錄頁的登錄和驗(yàn)證,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向setTimeout執(zhí)行代碼傳遞參數(shù)的方法,分析了向setTimeout傳遞參數(shù)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
javascript匿名函數(shù)中的''return function()''作用
這篇文章主要介紹了javascript匿名函數(shù)中的'return function()'作用介紹,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
上傳文件返回的json數(shù)據(jù)會(huì)被提示下載問題解決方案
這篇文章主要介紹了項(xiàng)目中python+js實(shí)現(xiàn)的上傳文件返回的json數(shù)據(jù)會(huì)被提示下載問題解決方案,需要的朋友可以參考下2014-12-12

