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>

 

posted @ 2017-09-20 21:58  笑笑~上善若水  阅读(1181)  评论(0)  编辑  收藏  举报