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、查看效果。
