jQuery单选框/复选框美化特效
1、新建html文档。
2、书写hmtl代码。<h1>jQuery单选框/复选框美化特效</h1><h3>（单选框）</h3><ul class="dowebok"> <li><input type="radio" name="radio" data-labelauty="百度经验"></li> <li><input type="radio" name="radio" data-labelauty="百度经验"></li> <li><input type="radio" name="radio" data-labelauty="百度经验"></li> <li><input type="radio" name="radio" data-labelauty="百度经验"></li> <li><input type="radio" name="radio" disabled data-labelauty="百度经验"></li></ul><hr><h3>（复选框）</h3><ul class="dowebok"> <li><input type="checkbox" name="checkbox" disabled checked data-labelauty="百度经验"></li> <li><input type="checkbox" name="checkbox" data-labelauty="百度经验"></li> <li><input type="checkbox" name="checkbox" data-labelauty="百度经验"></li> <li><input type="checkbox" name="checkbox" data-labelauty="百度经验"></li> <li><input type="checkbox" name="checkbox" data-labelauty="百度经验"></li> <li><input type="checkbox" name="checkbox" data-labelauty="百度经验"></li> <li><input type="checkbox" name="checkbox" data-labelauty="百度经验"></li></ul><script>$(function(){ $(':input').labelauty();});</script>
3、书写css代码。ul { list-style-type: none; }li { display: inline-block; }li { margin: 10px 0; }input.labelauty + label { font: 12px "Microsoft Yahei"; }input.labelauty + label ::selection { background-color: rgba(255, 255, 255, 0); }input.labelauty + label ::-moz-selection {background-color: rgba(255, 255, 255, 0);}input.labelauty { display: none !important; }input.labelauty + label { display: table; font-size: 11px; padding: 10px; background-color: #efefef; color: #b3b3b3; cursor: pointer; border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; transition: background-color 0.25s; -moz-transition: background-color 0.25s; -webkit-transition: background-color 0.25s; -o-transition: background-color 0.25s; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; }input.labelauty + label > span.labelauty-unchecked, input.labelauty + label > span.labelauty-checked { display: inline-block; line-height: 16px; vertical-align: bottom; }input.labelauty + label > span.labelauty-unchecked-image, input.labelauty + label > span.labelauty-checked-image { display: inline-block; width: 16px; height: 16px; vertical-align: bottom; background-repeat: no-repeat; background-position: left center; transition: background-image 0.5s linear; -moz-transition: background-image 0.5s linear; -webkit-transition: background-image 0.5s linear; -o-transition: background-image 0.5s linear; }input.labelauty + label > span.labelauty-unchecked-image + span.labelauty-unchecked, input.labelauty + label > span.labelauty-checked-image + span.labelauty-checked { margin-left: 7px; }input.labelauty:not(:checked):not([disabled]) + label:hover { background-color: #eaeaea; color: #a7a7a7; }input.labelauty:not(:checked) + label > span.labelauty-checked-image { display: none; }input.labelauty:not(:checked) + label > span.labelauty-checked { display: none; }input.labelauty:checked + label { background-color: #3498db; color: #ffffff; }input.labelauty:checked:not([disabled]) + label:hover { background-color: #72c5fd; }input.labelauty:checked + label > span.labelauty-unchecked-image { display: none; }input.labelauty:checked + label > span.labelauty-unchecked { display: none; }input.labelauty:checked + label > span.labelauty-checked { display: inline-block; }input.labelauty.no-label:checked + label > span.labelauty-checked { display: block; }input.labelauty[disabled] + label { opacity: 0.5; }input.labelauty + label > span.labelauty-unchecked-image { background-image: url( ../images/input-unchecked.png ); }input.labelauty + label > span.labelauty-checked-image { background-image: url( ../images/input-checked.png ); }
4、书写并添加js代码。<script src="js/jquery-1.8.3.min.js"></script><script>(function( $ ){ $.fn.labelauty = function( options ) { var settings = $.extend( { development: false, class: "labelauty", label: true, separator: "|", checked_label: "Checked", unchecked_label: "Unchecked", minimum_width: false, same_width: true }, options); return this.each(function() { var $object = $( this ); var use_labels = true; var labels; var labels_object; var input_id; if( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false ) return this; $object.addClass( settings.class ); labels = $object.attr( "data-labelauty" ); use_labels = settings.label; if( use_labels === true ) { if( labels == null || labels.length === 0 ) { labels_object = new Array(); labels_object[0] = settings.unchecked_label; labels_object[1] = settings.checked_label; } else { labels_object = labels.split( settings.separator ); if( labels_object.length > 2 ) { use_labels = false; debug( settings.development, "There's more than two labels. LABELAUTY will not use labels." ); } else { if( labels_object.length === 1 ) debug( settings.development, "There's just one label. LABELAUTY will use this one for both cases." ); } } } $object.css({ display : "none" }); $object.removeAttr( "data-labelauty" ); input_id = $object.attr( "id" ); if( input_id == null ) { var input_id_number = 1 + Math.floor( Math.random() * 1024000 ); input_id = "labelauty-" + input_id_number; while( $( input_id ).length !== 0 ) { input_id_number++; input_id = "labelauty-" + input_id_number; debug( settings.development, "Holy crap, between 1024 thousand numbers, one raised a conflict. Trying again." ); } $object.attr( "id", input_id ); } $object.after( create( input_id, labels_object, use_labels ) ); if( settings.minimum_width !== false ) $object.next( "label[for=" + input_id + "]" ).css({ "min-width": settings.minimum_width }); if( settings.same_width != false && settings.label == true ) { var label_object = $object.next( "label[for=" + input_id + "]" ); var unchecked_width = getRealWidth(label_object.find( "span.labelauty-unchecked" )); var checked_width = getRealWidth(label_object.find( "span.labelauty-checked" )); if( unchecked_width > checked_width ) label_object.find( "span.labelauty-checked" ).width( unchecked_width ); else label_object.find( "span.labelauty-unchecked" ).width( checked_width ); } }); }; function getRealWidth( element ) { var width = 0; var $target = element; var style = 'position: absolute !important; top: -1000 !important; '; $target = $target.clone().attr('style', style).appendTo('body'); width = $target.width(true); $target.remove(); return width; } function debug( debug, message ) { if( debug && window.console && window.console.log ) window.console.log( "jQuery-LABELAUTY: " + message ); }; function create( input_id, messages_object, label ) { var block; var unchecked_message; var checked_message; if( messages_object == null ) unchecked_message = checked_message = ""; else { unchecked_message = messages_object[0]; if( messages_object[1] == null ) checked_message = unchecked_message; else checked_message = messages_object[1]; } if( label == true ) { block = '<label for="' + input_id + '">' + '<span class="labelauty-unchecked-image"></span>' + '<span class="labelauty-unchecked">' + unchecked_message + '</span>' + '<span class="labelauty-checked-image"></span>' + '<span class="labelauty-checked">' + checked_message + '</span>' + '</label>'; } else { block = '<label for="' + input_id + '">' + '<span class="labelauty-unchecked-image"></span>' + '<span class="labelauty-checked-image"></span>' + '</label>'; } return block; };}( jQuery ));</script>
5、代码整体结构。
6、查看效果。
