bootstrap switch开关组件使用方法详解
更新时间：2017年08月22日 09:20:52 作者：javanbme
这篇文章主要为大家详细介绍了bootstrap switch开关组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap中文网上有这么一个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：开关中开按钮的颜色。可选值有'primary', 'info', 'success', 'warning', 'danger', 'default'
offColor：开关中关按钮的颜色。可选值'primary', 'info', 'success', 'warning', 'danger', 'default'
onText：开关中开按钮的文本，默认是“ON”。
offText：开关中关按钮的文本，默认是“OFF”。
onInit：初始化组件的事件。
onSwitchChange：开关变化时的事件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了原生js实现日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家详细介绍了js实现图片无缝循环滚动特效的相关资料，本实例在网页中较为常见，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了JavaScript 俄罗斯方块游戏,结合实例形式详细分析了JavaScript 俄罗斯方块游戏原理、实现步骤及相关操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JsRender for index循环索引用法,以实例形式详细分析了JsRender中循环的用法,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了JS+CSS实现的蓝色table选项卡效果,通过鼠标事件调用自定义函数实现页面元素样式的遍历与动态切换效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
JS值当前DIV的ID值的代码...2007-05-05
这篇文章主要为大家详细介绍了JS实现可控制的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要帮助大家轻松掌握JavaScript策略模式，什么是js策略模式，感兴趣的小伙伴们可以参考一下2016-08-08
最近因为工作需要,搭建了一个加班打卡的小程序,下面这篇文章主要给大家介绍了关于uniapp微信小程序打卡功能的详细实现流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了JS实现json对象数组按对象属性排序操作,涉及javascript使用sort方法针对json数组的遍历与排序相关操作实现技巧,需要的朋友可以参考下2018-05-05
最新评论