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)大小。可選值有'mini', 'small', 'normal', 'large'
onColor：開(kāi)關(guān)中開(kāi)按鈕的顏色?？蛇x值有'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)文章
JavaScript高仿支付寶倒計(jì)時(shí)頁(yè)面及代碼實(shí)現(xiàn)
在支付寶上我們經(jīng)常會(huì)見(jiàn)到支付寶倒計(jì)時(shí)功能，倒計(jì)時(shí)應(yīng)用非常廣泛，下文給大家介紹js制作支付寶倒計(jì)時(shí)功能，但是里面涉及到，倒計(jì)時(shí)，彈框，以及字體圖的相關(guān)知識(shí)，感興趣的朋友一起看看吧2016-10-10
Webpack學(xué)習(xí)之動(dòng)態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學(xué)習(xí)之動(dòng)態(tài)import原理及源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了js獲取鼠標(biāo)位置的方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript響應(yīng)鼠標(biāo)事件獲取并操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12
JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼,可實(shí)現(xiàn)基本的JS響應(yīng)鼠標(biāo)事件動(dòng)態(tài)展開(kāi)與折疊菜單欄的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
javascript獲取select的當(dāng)前值示例代碼(兼容IE/Firefox/Opera/Chrome)
本篇文章主要介紹了javascript獲取select的當(dāng)前值示例代碼(兼容IE/Firefox/Opera/Chrome) 需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這應(yīng)該是最詳細(xì)的響應(yīng)式系統(tǒng)講解了
這篇文章主要介紹了這應(yīng)該是最詳細(xì)的響應(yīng)式系統(tǒng)講解了，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
很多朋友需要使用到cookies操作，腳本之家以前也發(fā)表了不少相關(guān)的文章。這篇文章，雖然亂了點(diǎn)，但知識(shí)點(diǎn)比較多。2010-07-07
這篇文章主要介紹了webpack的pitching loader詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
zTree插件之單選下拉菜單實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
使用JavaScript動(dòng)態(tài)設(shè)置樣式實(shí)現(xiàn)代碼及演示動(dòng)畫(huà)
使用onmouseover和onmouseout事件實(shí)現(xiàn)不同的效果而且是使用js動(dòng)態(tài)實(shí)現(xiàn)，本文有利于鞏固你js與css方面的知識(shí)，感興趣的你可以了解下哦，希望本文對(duì)你有所幫助2013-01-01