switcher.js

最新推荐文章于 2021-12-13 11:19:11 发布

loshirleyve

最新推荐文章于 2021-12-13 11:19:11 发布

阅读量836

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： UI组件 html javascript

本文链接：https://blog.youkuaiyun.com/loshirleyve/article/details/73178880

web前端专栏收录该内容

12 篇文章

订阅专栏

这里写图片描述

/*
* 使用：
* 1，引入switcher.js
* 2,
* new switcher({
*       callback: function(checked){
*           if(checked){
*               alert("true");
*           }else {
*               alert("false");
*           }
*       }
*   });
* */
(function(global,factory){
    if(typeof define === 'function' && define.amd){
        define(function(){
            return factory();
        });
    }else if(typeof module !== 'undefined' && module.exports){
        module.exports = factory();
    }else{
        global.switcher = factory(global);
    }
}(typeof window !== 'undefined' ? window : this,function(win){
    var switcher = function(option){
        var vm = this;
        vm.option = option||{};
        var style = 'label{display:inline-block;}input.switch{z-index:-100;width:1px;height:1px;position:absolute;opacity:0;cursor:pointer;margin:0;padding:0;}.lbl{position:relative;display:inline-block;cursor:pointer;}.lbl::before{content:"";border-radius:12px;display:inline-block;background-color:#888;width:42px;height:22px;transition:background .25s ease;}.lbl::after{content:"";position:absolute;top:0;left:0;border-radius:12px;width:21px;height:21px;background-color:#F2F2F2;-webkit-transition:left .25s ease;transition:left .25s ease;box-shadow:0 1px 1px 1px rgba(0,0,0,.3);}input:checked+.lbl::after{left:21px;}input:checked+.lbl::before{background:orangered;}';
        if(!document.styleSheets['switcher']){
            var ss = document.createElement("style");
            ss.setAttribute("type", "text/css");
            ss.appendChild(document.createTextNode(style));
            document.getElementsByTagName('head')[0].appendChild(ss);
        }
        var eleInput = document.createElement("input");
            eleInput.setAttribute("type", "checkbox");
            eleInput.setAttribute("class", "switch");
        var eleSpan = document.createElement("span");
            eleSpan.setAttribute("class", "lbl");
        var eleLabel = document.createElement("label");
            eleLabel.setAttribute("class", "J-switch");
            eleLabel.appendChild(eleInput).appendChild(eleSpan);
            eleLabel.appendChild(eleSpan);
        document.getElementsByTagName('body')[0].appendChild(eleLabel);
        vm.dom = document.getElementsByClassName("J-switch");
        vm.dom[0].getElementsByTagName("input")[0].addEventListener('click', function(){
            if(this.checked){
                vm.onCheck(true);
            }else {
                vm.onCheck(false);
            }
        })
        return this;
    }

    switcher.prototype.onCheck = function(checked){
        if(checked){
            this.option.callback && this.option.callback(true);
        }else{
            this.option.callback && this.option.callback(false);
        }
    }
    return switcher;
}));