jquery 按钮切换插件

Posted 2020-10-07 笑笑~上善若水

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 按钮切换插件相关的知识，希望对你有一定的参考价值。

样式：

点击第二个按钮，弹出回调函数。然后改变颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="t-Switch.css">
</head>
<body>

<span class="switch switch-off" name="s_marketEnable" data-check="1" id="stwichBtn_1"></span>
<span class="switch switch-off" name="s_marketEnable" data-check="1" id="stwichBtn_2"></span>
<script src="jquery.min.js"></script>
<script src="switch-button.js"></script>
<script>
//    回调函数
    function callback(dom) {
        var id = dom.attr(\'id\');
        alert(id);
    }
//    基于name取dom元素
    $(\'[name=s_marketEnable]\').switchButton({callback:callback});
</script>
</body>

</html>

;(function ($) {

    $.fn.switchButton = function (options) {
        var defaults = {
            target:$(this),
            callback:null
        };
        var opts = $.extend({},defaults,options);
        var _self = this;
        
        var swtichBtn = {
            init:function () {
                var _this = this;
                // 如果是多个按钮
                if(opts.target.length >1){
                    $.map(opts.target,function (domEle,index) {
                        var id = $(domEle).attr(\'id\');
                        if(!id){
                            id = "stwichBtn" + index
                            $(domEle).attr(\'id\',id);
                        }
                        $(\'#\' + id).on(\'click\',function () {
                            _this.clickEvent(domEle);
                        })
                    })
                }else{
                    $(_self).on(\'click\',function () {
                        _this.bindEvent(opts.target);
                    })
                }

            },
            clickEvent:function (domEle) {
                  var _this = this;
                  if($(domEle).hasClass(\'switch-on\')){
                      _this.off($(domEle));
                  }else{
                      _this.on($(domEle));
                  }
            },
            bindEvent:function (dom) {
                var _this = this;
                if(dom.hasClass(\'switch-on\')){
                    _this.off(dom);
                }else{
                    _this.on(dom);
                }

            },
            on:function (dom) {
                dom.addClass(\'switch-on\').removeClass(\'switch-off\');
                opts.callback && opts.callback(dom);
            },
            off:function (dom) {
                dom.addClass(\'switch-off\').removeClass(\'switch-on\');
                opts.callback && opts.callback(dom);
            }
        }

        swtichBtn.init(opts);
    }
})(jQuery);

[class|=switch]{
    display: block;
    position: relative;
    width: 50px;
    height: 20px;
    background-color: #ffffff;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}
.switch:before {
    position: absolute;
    display: block;
    content: \'\';
    width: 19px;
    height: 19px;
    border:1px solid #bcbcbc;
    background-color: #fff;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    cursor: pointer;
}

.switch-on {
    display: block;
    position: relative;
    width: 50px;
    height: 20px;
    background-color: #1a75ff;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

.switch-on:before{
    left:30px;
    transition: background-color 0.4s, left 0.2s;
}

.switch-off:before{
    left:0px;
    transition: background-color 0.4s, left 0.2s;
}

.switch-off {
    display: block;
    position: relative;
    width: 50px;
    height: 20px;
    background-color: #b0b0b0;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
}

如果是通过ajax渲染数据的，也是可以使用。但得在渲染完成后才能调用

采用 Mock.js模拟数据，然后用ajax请求渲染到form表单里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="t-Switch.css">
</head>
<body>
<form>

</form>
<script src="jquery.min.js"></script>
<script src="switch-button.js"></script>
<script src="mock.js"></script>

<script>
    var html = \'\';
    Mock.mock(\'/test/getData\',{
        \'lists|5\': [{
            \'id|+1\': 1,
            \'email\': \'@EMAIL\'
        }]
    })
    $.ajax({
        url:\'/test/getData\',
    }).done(function (data,status,jqXHR) {
        var data = JSON.parse(data);

        data.lists.forEach(function(value,index){
            html += \'<span class="switch switch-off" name="s_marketEnable" id="stwichBtn_\'+  value.id+\'"></span>\';
        })
           $(\'form\').html(html);
//            数据渲染完调用
//           $(\'form\').children(\'.switch\').switchButton({callback:callback});
           $(\'.switch\').switchButton({callback:callback});
        });
//    回调函数
    function callback(dom) {
        var id = dom.attr(\'id\');
        alert("id:" + id);
    }

</script>
</body>

</html>

以上是关于jquery 按钮切换插件的主要内容，如果未能解决你的问题，请参考以下文章

很有点意思的特效，本人很喜欢

Jquery制作插件---渐隐轮播

常用的几个JQuery代码片段

Jquery if复选框是否已选中Bootstrap开关

25个可遇不可求的jQuery插件