jquery 按钮切换插件

时间：2017-09-20 23:30:57 阅读：461 评论：0 收藏：0 [点我收藏+]

标签：height rip ges ffffff isp check this htm btn

样式：

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

技术分享

<!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;
}

jquery 按钮切换插件

标签：height rip ges ffffff isp check this htm btn

原文地址：http://www.cnblogs.com/xiaoxiaossrs/p/7565318.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行