jQuery单选框跟复选框美化代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery单选框跟复选框美化代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery单选框跟复选框美化代码</title>
<link rel="stylesheet" href="css/jquery-labelauty.css">
<style>
ul { list-style-type: none;}
li { display: inline-block;}
li { margin: 10px 0;}
input.labelauty + label { font: 12px "Microsoft Yahei";}
</style>
</head>

<body>
<center>
<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="HTML"></li>
	<li><input type="checkbox" name="checkbox" data-labelauty="CSS"></li>
	<li><input type="checkbox" name="checkbox" data-labelauty="JavaScript"></li>
	<li><input type="checkbox" name="checkbox" data-labelauty="SEO"></li>
	<li><input type="checkbox" name="checkbox" data-labelauty="PHP"></li>
	<li><input type="checkbox" name="checkbox" data-labelauty="JAVA"></li>
	<li><input type="checkbox" name="checkbox" data-labelauty=".NET"></li>
</ul>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-labelauty.js"></script>
<script>
$(function(){
	$(':input').labelauty();
});
</script>
</center>
</body>
</html>

JS代码(jquery-labelauty.js):

/*! * LABELAUTY jQuery Plugin * * @file:jquery-labelauty.js * @author:Francisco Neves (@fntneves) * @site:www.francisconeves.com * @license:MIT License */
(function( $ ){
	$.fn.labelauty = function( options ){
	/* * Our default settings * Hope you don't need to change anything,with these settings */
var settings = $.extend({
	// Development Mode// This will activate console debug messagesdevelopment:false,// Trigger Class// This class will be used to apply stylesclass:"labelauty",// Use text label ?// If false,then only an icon represents the inputlabel:true,// Separator between labels' messages// If you use this separator for anything,choose a new oneseparator:"|",// Default Checked Message// This message will be visible when input is checkedchecked_label:"Checked",// Default UnChecked Message// This message will be visible when input is uncheckedunchecked_label:"Unchecked",// Minimum Label Width// This value will be used to apply a minimum width to the text labelsminimum_width:false,// Use the greatest width between two text labels ?// If this has a true value,then label width will be the greatest between labelssame_width:true}
,options);
	/* * Let's create the core function * It will try to cover all settings and mistakes of using */
return this.each(function(){
	var $object = $( this );
	var use_labels = true;
	var labels;
	var labels_object;
	var input_id;
	// Test if object is a check input// Don't mess me up,come onif( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false )return this;
	// Add "labelauty" class to all checkboxes// So you can apply some custom styles$object.addClass( settings.class );
	// Get the value of "data-labelauty" attribute// Then,we have the labels for each case (or not,as we will see)labels = $object.attr( "data-labelauty" );
	use_labels = settings.label;
	// It's time to check if it's going to the right way// Null values,more labels than expected or no labels will be handled hereif( use_labels === true ){
	if( labels == null || labels.length === 0 ){
	// If attribute has no label and we want to use,then use the default labelslabels_object = new Array();
	labels_object[0] = settings.unchecked_label;
	labels_object[1] = settings.checked_label;
}
else{
	// Ok,ok,it's time to split Checked and Unchecked labels// We split,by the "settings.separator" optionlabels_object = labels.split( settings.separator );
	// Now,let's check if exist _only_ two labels// If there's more than two,then we do not use labels:(// Else,do some additional testsif( labels_object.length > 2 ){
	use_labels = false;
	debug( settings.development,"There's more than two labels. LABELAUTY will not use labels." );
}
else{
	// If there's just one label (no split by "settings.separator"),it will be used for both cases// Here,we have the possibility of use the same label for both casesif( labels_object.length === 1 )debug( settings.development,"There's just one label. LABELAUTY will use this one for both cases." );
}
}
}
/* * Let's begin the beauty */
// Start hiding ugly checkboxes// Obviously,we don't need native checkboxes:O$object.css({
	display:"none"}
);
	// We don't need more data-labelauty attributes!// Ok,ok,it's just for beauty improvement$object.removeAttr( "data-labelauty" );
	// Now,grab checkbox ID Attribute for "label" tag use// If there's no ID Attribute,then generate a new oneinput_id = $object.attr( "id" );
	if( input_id == null ){
	var input_id_number = 1 + Math.floor( Math.random() * 1024000 );
	input_id = "labelauty-" + input_id_number;
	// Is there any element with this random ID ?// If exists,then increment until get an unused IDwhile( $( 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 );
}
// Now,add necessary tags to make this work// Here,we're going to test some control variables and act properly$object.after( create( input_id,labels_object,use_labels ) );
	// Now,add "min-width" to label// Let's say the truth,a fixed width is more beautiful than a variable widthif( settings.minimum_width !== false )$object.next( "label[for=" + input_id + "]" ).css({
	"min-width":settings.minimum_width}
);
	// Now,add "min-width" to label// Let's say the truth,a fixed width is more beautiful than a variable widthif( 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 );
	elselabel_object.find( "span.labelauty-unchecked" ).width( checked_width );
}
}
);
}
;
	/* * Tricky code to work with hidden elements,like tabs. * Note:This code is based on jquery.actual plugin. * https://github.com/dreamerslab/jquery.actual */
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 checked message is null,then put the same text of unchecked messageif( messages_object[1] == null )checked_message = unchecked_message;
	elsechecked_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 ));

CSS代码(jquery-labelauty.css):

/*! * LABELAUTY jQuery Plugin Styles * * @file:jquery-labelauty.css * @author:Francisco Neves (@fntneves) * @site:www.francisconeves.com * @license:MIT License */
/* Prevent text and blocks selection */
input.labelauty + label::selection{background-color:rgba(255,255,255,0);}
input.labelauty + label::-moz-selection{background-color:rgba(255,255,255,0);}
/* Hide original checkboxes. They are ugly! */
input.labelauty{display:none !important;}
/* * Let's style the input * Feel free to work with it as you wish! */
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;}
/* Stylish text inside label */
input.labelauty + label > span.labelauty-unchecked,input.labelauty + label > span.labelauty-checked{display:inline-block;line-height:16px;vertical-align:bottom;}
/* Stylish icons inside label */
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;}
/* When there's a label,add a little margin to the left */
input.labelauty + label > span.labelauty-unchecked-image + span.labelauty-unchecked,input.labelauty + label > span.labelauty-checked-image + span.labelauty-checked{margin-left:7px;}
/* When not Checked */
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;}
/* When Checked */
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;}
/* When Disabled */
input.labelauty[disabled] + label{opacity:0.5;}
/* Add a background to (un)checked images */
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 );}

附件:下载该文件资源,减少时间成本(增值服务)