实践｜体验了一下bootstrap-switch插件

在项目中我实现的按钮是用切图做的、有很多的局限性、比如没有动画效果、不能改变颜色。

我和我的按钮

这个开关，总的来说实现的还挺好用的，有很多属性可以自定义，而且有动画效果。引入代码量大概600行。

一、通过CDN引入Bootstrap

这个是比较快捷的办法：

二、引入BootstrapSwitch

没有找到bootstrapSwitch的CDN的真身、直接下载它的源码包官方文档(最下面)，在/dist文件夹下能找到构建后的css和js文件

/dist

拷贝到自己的项目中，然后引入：

三、代码

结果：

/result

1.按钮样式不需要调用js代码去初始化了

2.按钮的原生click事件、是监听不到的，要绑定switch-change事件。

3.switch-change事件支持委托。

4.data中有两个属性：value代表按钮的值, el代表checkbox元素

四、这个插件有待改进

这个开关是用checkbox模拟出来的，页面初始化时总会有那个checkbox一闪而过，即使是官方的demo也如此。不过随便用用还可以。

五、参考文档

一、通过CDN引入Bootstrap

这个是比较快捷的办法：

二、引入BootstrapSwitch

没有找到bootstrapSwitch的CDN的真身、直接下载它的源码包官方文档(最下面)，在/dist文件夹下能找到构建后的css和js文件

/dist

拷贝到自己的项目中，然后引入：

三、代码

结果：

/result

1.按钮样式不需要调用js代码去初始化了

2.按钮的原生click事件、是监听不到的，要绑定switch-change事件。

3.switch-change事件支持委托。

4.data中有两个属性：value代表按钮的值, el代表checkbox元素

四、这个插件有待改进

这个开关是用checkbox模拟出来的，页面初始化时总会有那个checkbox一闪而过，即使是官方的demo也如此。不过随便用用还可以。

五、参考文档

开关的更多用法请参考：官方文档