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

作者: 8c9c47c26245 | 来源:发表于2017-04-25 10:21 被阅读677次

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


    我和我的按钮我和我的按钮

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

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

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

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

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

    四、这个插件有待改进

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

    五、参考文档

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

    相关文章

      网友评论

      本文标题:实践|体验了一下bootstrap-switch插件

      本文链接:https://www.haomeiwen.com/subject/vqzmzttx.html