首页 > 代码库 > 开关按钮
开关按钮
效果如下:
只需要修改他的样式就可以变换开关的属性,还是比较好用。
switch.css代码
body * {font-family: Arial, Helvetica, sans-serif;box-sizing: border-box;-moz-box-sizing: border-box;} a {color: #888; text-decoration: none;} small {font-size: 13px;font-weight: normal;padding-left: 10px;} #first_div {width: 90%; max-width: 600px;min-width: 340px;margin: 50px auto 0;color: #444;} #second_div {width: 90%;max-width: 600px;min-width: 340px;margin: 50px auto 0;background: #f3f3f3;border: 6px solid #eaeaea;padding: 20px 40px 40px;text-align: center; border-radius: 2px;} #third_div {width: 90%;max-width: 600px;min-width: 340px;margin: 10px auto 0;} /* */ .lcs_wrap { display: inline-block; direction: ltr; height: 28px; vertical-align: middle; } .lcs_wrap input { display: none; } .lcs_switch { display: inline-block; position: relative; width: 37px; height: 17px; border-radius: 30px; background: #ddd; overflow: hidden; cursor: pointer; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .lcs_cursor { display: inline-block; position: absolute; top: 0px; width: 17px; height: 17px; border-radius: 100%; background: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.1); z-index: 10; -webkit-transition: all .2s linear; -ms-transition: all .2s linear; transition: all .2s linear; } .lcs_label { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 12px; letter-spacing: 1px; line-height: 18px; color: #fff; font-weight: bold; position: absolute; width: 33px; top: 5px; overflow: hidden; text-align: center; opacity: 0; -webkit-transition: all .2s ease-in-out .1s; -ms-transition: all .2s ease-in-out .1s; transition: all .2s ease-in-out .1s; } .lcs_label.lcs_label_on { left: -70px; z-index: 6; } .lcs_label.lcs_label_off { right: -70px; z-index: 5; } /* on */ .lcs_switch.lcs_on { background: #75b936; box-shadow: 0 0 2px #579022 inset; } .lcs_switch.lcs_on .lcs_cursor { left: 20px; } .lcs_switch.lcs_on .lcs_label_on { left: 10px; opacity: 1; } /* off */ .lcs_switch.lcs_off { background: #b2b2b2; box-shadow: 0px 0px 2px #a4a4a4 inset; } .lcs_switch.lcs_off .lcs_cursor { left:0px; } .lcs_switch.lcs_off .lcs_label_off { right: 10px; opacity: 1; } /* disabled */ .lcs_switch.lcs_disabled { opacity: 0.65; filter: alpha(opacity=65); cursor: default; }
switch.js代码:
(function(a){if("undefined"!=typeof a.fn.lc_switch)return!1;a.fn.lc_switch=function(d,f){a.fn.lcs_destroy=function(){a(this).each(function(){a(this).parents(".lcs_wrap").children().not("input").remove();a(this).unwrap()});return!0};a.fn.lcs_on=function(){a(this).each(function(){var b=a(this).parents(".lcs_wrap"),c=b.find("input");"function"==typeof a.fn.prop?b.find("input").prop("checked",!0):b.find("input").attr("checked",!0);b.find("input").trigger("lcs-on");b.find("input").trigger("lcs-statuschange"); b.find(".lcs_switch").removeClass("lcs_off").addClass("lcs_on");if(b.find(".lcs_switch").hasClass("lcs_radio_switch")){var d=c.attr("name");b.parents("form").find("input[name="+d+"]").not(c).lcs_off()}});return!0};a.fn.lcs_off=function(){a(this).each(function(){var b=a(this).parents(".lcs_wrap");"function"==typeof a.fn.prop?b.find("input").prop("checked",!1):b.find("input").attr("checked",!1);b.find("input").trigger("lcs-off");b.find("input").trigger("lcs-statuschange");b.find(".lcs_switch").removeClass("lcs_on").addClass("lcs_off")}); return!0};return this.each(function(){if(!a(this).parent().hasClass("lcs_wrap")){var b="undefined"==typeof d?"ON":d,c="undefined"==typeof f?"OFF":f,b=b?‘<div class="lcs_label lcs_label_on">‘+b+"</div>":"",c=c?‘<div class="lcs_label lcs_label_off">‘+c+"</div>":"",g=a(this).is(":disabled")?!0:!1,e=a(this).is(":checked")?!0:!1,e=""+(e?" lcs_on":" lcs_off");g&&(e+=" lcs_disabled");b=‘<div class="lcs_switch ‘+e+‘"><div class="lcs_cursor"></div>‘+b+c+"</div>";!a(this).is(":input")||"checkbox"!=a(this).attr("type")&& "radio"!=a(this).attr("type")||(a(this).wrap(‘<div class="lcs_wrap"></div>‘),a(this).parent().append(b),a(this).parent().find(".lcs_switch").addClass("lcs_"+a(this).attr("type")+"_switch"))}})};a(document).ready(function(){a(document).delegate(".lcs_switch:not(.lcs_disabled)","click tap",function(d){a(this).hasClass("lcs_on")?a(this).hasClass("lcs_radio_switch")||a(this).lcs_off():a(this).lcs_on()});a(document).delegate(".lcs_wrap input","change",function(){a(this).is(":checked")?a(this).lcs_on(): a(this).lcs_off()})})})(jQuery);
js代码是混淆后的代码
html代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=http://www.mamicode.com/"switch.css"> </head> <body> <!--代码部分begin--> <div id="second_div"> <form> <div style="float: left; width: 50%;"> <p> <input type="checkbox" name="check-1" value=http://www.mamicode.com/"4" class="lcs_check" autocomplete="off" /> </p> <p> <input type="checkbox" name="check-2" value=http://www.mamicode.com/"5" class="lcs_check" disabled="disabled" autocomplete="off" /> </p> <p> <input type="checkbox" name="check-3" value=http://www.mamicode.com/"6" class="lcs_check lcs_tt1" checked="checked" autocomplete="off" /> </p> </div> <div style="float: right; width: 50%;"> <p> <input type="radio" name="radio-1" value=http://www.mamicode.com/"1" class="lcs_check lcs_tt2" autocomplete="off" /> </p> <p> <input type="radio" name="radio-1" value=http://www.mamicode.com/"2" class="lcs_check lcs_tt2" disabled="disabled" autocomplete="off" /> </p> <p> <input type="radio" name="radio-1" value=http://www.mamicode.com/"3" class="lcs_check lcs_tt2" checked="checked" autocomplete="off" /> </p> </div> </form> <div style="clear:both;"></div> </div> <script src=http://www.mamicode.com/"https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script src=http://www.mamicode.com/"switch.js"></script> <script> $(function(){ $(‘input‘).lc_switch(); $(‘body‘).delegate(‘.lcs_check‘, ‘lcs-statuschange‘, function() { var status = ($(this).is(‘:checked‘)) ? ‘checked‘ : ‘unchecked‘; console.log(‘field changed status: ‘+ status ); }); $(‘body‘).delegate(‘.lcs_check‘, ‘lcs-on‘, function() { console.log(‘field is checked‘); }); $(‘body‘).delegate(‘.lcs_check‘, ‘lcs-off‘, function() { console.log(‘field is unchecked‘); }); }); </script> <!--代码部分end--> </body> </html>
开关按钮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。