在项目中我实现的按钮是用切图做的、有很多的局限性、比如没有动画效果、不能改变颜色。
我和我的按钮
这个开关,总的来说实现的还挺好用的,有很多属性可以自定义,而且有动画效果。引入代码量大概600行。
一、通过CDN引入Bootstrap
这个是比较快捷的办法:
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
二、引入BootstrapSwitch
没有找到bootstrapSwitch的CDN的真身、直接下载它的源码包官方文档(最下面),在/dist文件夹下能找到构建后的css和js文件
拷贝到自己的项目中,然后引入:
<link href="./resources/css/bootstrap-switch.css" rel="stylesheet">
<script src="./resources/js/bootstrap-switch.js"></script>
三、代码
<div class="switch switch-small J_change-status">
<input type="checkbox" checked />
</div>
<script>
/* 绑定按钮事件 */
this.$root.delegate(".J_change-status", "switch-change", $.proxy(function(e, data){
console.log(data.value); /* true or false */
}, this));
</script>
结果:
/result
1.按钮样式不需要调用js代码去初始化了
2.按钮的原生click事件、是监听不到的,要绑定switch-change事件。
3.switch-change事件支持委托。
4.data中有两个属性:value代表按钮的值, el代表checkbox元素
四、这个插件有待改进
这个开关是用checkbox模拟出来的,页面初始化时总会有那个checkbox一闪而过,即使是官方的demo也如此。不过随便用用还可以。
五、参考文档
一、通过CDN引入Bootstrap
这个是比较快捷的办法:
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
二、引入BootstrapSwitch
没有找到bootstrapSwitch的CDN的真身、直接下载它的源码包官方文档(最下面),在/dist文件夹下能找到构建后的css和js文件
拷贝到自己的项目中,然后引入:
<link href="./resources/css/bootstrap-switch.css" rel="stylesheet">
<script src="./resources/js/bootstrap-switch.js"></script>
三、代码
<div class="switch switch-small J_change-status">
<input type="checkbox" checked />
</div>
<script>
/* 绑定按钮事件 */
this.$root.delegate(".J_change-status", "switch-change", $.proxy(function(e, data){
console.log(data.value); /* true or false */
}, this));
</script>
结果:
/result
1.按钮样式不需要调用js代码去初始化了
2.按钮的原生click事件、是监听不到的,要绑定switch-change事件。
3.switch-change事件支持委托。
4.data中有两个属性:value代表按钮的值, el代表checkbox元素
四、这个插件有待改进
这个开关是用checkbox模拟出来的,页面初始化时总会有那个checkbox一闪而过,即使是官方的demo也如此。不过随便用用还可以。
五、参考文档
开关的更多用法请参考:官方文档
网友评论