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

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

我和我的按钮

这个开关，总的来说实现的还挺好用的，有很多属性可以自定义，而且有动画效果。引入代码量大概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文件

/dist

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

    <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文件

/dist

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

    <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也如此。不过随便用用还可以。

五、参考文档

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