bootstrap switch開關組件使用方法詳解
更新時間：2017年08月22日 09:20:52 作者：javanbme
這篇文章主要為大家詳細介紹了bootstrap switch開關組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
bootstrap中文網(wǎng)上有這么一個bootstrap-switch組件，很實用，看demo學習并記錄一下。
<!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:"啟動",
offText:"停止",
onColor:"success",
offColor:"info",
size:"small",
onSwitchChange:function(event,state){
if(state==true){
alert('已打開');
}else{
alert('已關閉');
}
}
})
</script>
</body>
</html>
Bootstrap-Switch源碼地址：https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch文檔以及Demo：http://www.bootstrap-switch.org/examples.html
常用的屬性
size：開關大小。可選值有'mini', 'small', 'normal', 'large'
onColor：開關中開按鈕的顏色?？蛇x值有'primary', 'info', 'success', 'warning', 'danger', 'default'
offColor：開關中關按鈕的顏色?？蛇x值'primary', 'info', 'success', 'warning', 'danger', 'default'
onText：開關中開按鈕的文本，默認是“ON”。
offText：開關中關按鈕的文本，默認是“OFF”。
onInit：初始化組件的事件。
onSwitchChange：開關變化時的事件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
JavaScript高仿支付寶倒計時頁面及代碼實現(xiàn)
在支付寶上我們經(jīng)常會見到支付寶倒計時功能，倒計時應用非常廣泛，下文給大家介紹js制作支付寶倒計時功能，但是里面涉及到，倒計時，彈框，以及字體圖的相關知識，感興趣的朋友一起看看吧2016-10-10
Webpack學習之動態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學習之動態(tài)import原理及源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了js獲取鼠標位置的方法,結合實例形式詳細分析了JavaScript響應鼠標事件獲取并操作頁面元素屬性的相關技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS實現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼,可實現(xiàn)基本的JS響應鼠標事件動態(tài)展開與折疊菜單欄的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
javascript獲取select的當前值示例代碼(兼容IE/Firefox/Opera/Chrome)
本篇文章主要介紹了javascript獲取select的當前值示例代碼(兼容IE/Firefox/Opera/Chrome) 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了這應該是最詳細的響應式系統(tǒng)講解了，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
很多朋友需要使用到cookies操作，腳本之家以前也發(fā)表了不少相關的文章。這篇文章，雖然亂了點，但知識點比較多。2010-07-07
這篇文章主要介紹了webpack的pitching loader詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
zTree插件之單選下拉菜單實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
使用JavaScript動態(tài)設置樣式實現(xiàn)代碼及演示動畫
使用onmouseover和onmouseout事件實現(xiàn)不同的效果而且是使用js動態(tài)實現(xiàn)，本文有利于鞏固你js與css方面的知識，感興趣的你可以了解下哦，希望本文對你有所幫助2013-01-01