switcher.js

/** 使用：* 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;}));