样式：
点击第二个按钮，弹出回调函数。然后改变颜色。
<!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>