满意度jQuery星级评分插件js代码

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

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

以下是满意度jQuery星级评分插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>满意度jQuery星级评分插件</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/comment.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
/*quiz style*/
.quiz{border:solid 1px #ccc;height:270px;width:772px;}
.quiz h3{font-size:14px;line-height:35px;height:35px;border-bottom:solid 1px #e8e8e8;padding-left:20px;background:#f8f8f8;color:#666;position:relative;}
.quiz_content{padding-top:10px;padding-left:20px;position:relative;height:205px;}
.quiz_content .btm{border:none;width:100px;height:33px;background:url(images/btn.gif) no-repeat;margin:10px 0 0 64px;display:inline;cursor:pointer;}
.quiz_content li.full-comment{position:relative;z-index:99;height:41px;}
.quiz_content li.cate_l{height:24px;line-height:24px;padding-bottom:10px;}
.quiz_content li.cate_l dl dt{float:left;}
.quiz_content li.cate_l dl dd{float:left;padding-right:15px;}
.quiz_content li.cate_l dl dd label{cursor:pointer;}
.quiz_content .l_text{height:120px;position:relative;padding-left:18px;}
.quiz_content .l_text .m_flo{float:left;width:47px;}
.quiz_content .l_text .text{width:634px;height:109px;border:solid 1px #ccc;}
.quiz_content .l_text .tr{position:absolute;bottom:-18px;right:40px;}
/*goods-comm-stars style*/
.goods-comm{height:41px;position:relative;z-index:7;}
.goods-comm-stars{line-height:25px;padding-left:12px;height:41px;position:absolute;top:0px;left:0;width:400px;}
.goods-comm-stars .star_l{float:left;display:inline-block;margin-right:5px;display:inline;}
.goods-comm-stars .star_choose{float:left;display:inline-block;}
/* rater star */
.rater-star{position:relative;list-style:none;margin:0;padding:0;background-repeat:repeat-x;background-position:left top;float:left;}
.rater-star-item, .rater-star-item-current, .rater-star-item-hover{position:absolute;top:0;left:0;background-repeat:repeat-x;}
.rater-star-item{background-position: -100% -100%;}
.rater-star-item-hover{background-position:0 -48px;cursor:pointer;}
.rater-star-item-current{background-position:0 -48px;cursor:pointer;}
.rater-star-item-current.rater-star-happy{background-position:0 -25px;}
.rater-star-item-hover.rater-star-happy{background-position:0 -25px;}
.rater-star-item-current.rater-star-full{background-position:0 -72px;}
/* popinfo */
.popinfo{display:none;position:absolute;top:30px;background:url(images/comment/infobox-bg.gif) no-repeat;padding-top:8px;width:192px;margin-left:-14px;}
.popinfo .info-box{border:1px solid #f00;border-top:0;padding:0 5px;color:#F60;background:#FFF;}
.popinfo .info-box div{color:#333;}
.rater-click-tips{font:12px/25px;color:#333;margin-left:10px;background:url(images/comment/infobox-bg-l.gif) no-repeat 0 0;width:125px;height:34px;padding-left:16px;overflow:hidden;}
.rater-click-tips span{display:block;background:#FFF9DD url(images/comment/infobox-bg-l-r.gif) no-repeat 100% 0;height:34px;line-height:34px;padding-right:5px;}
.rater-star-item-tips{background:url(images/comment/star-tips.gif) no-repeat 0 0;height:41px;overflow:hidden;}
.cur.rater-star-item-tips{display:block;}	
.rater-star-result{color:#FF6600;font-weight:bold;padding-left:10px;float:left;}
</style>

<center><br>
<div class="quiz">
	<h3>我要评论</h3>
	<div class="quiz_content">
		<form action="" id="" method="post">
			<div class="goods-comm">
				<div class="goods-comm-stars">
					<span class="star_l">满意度：</span>
					<div id="rate-comm-1" class="rate-comm"></div>
				</div>
			</div>
			<div class="l_text">
				<label class="m_flo">内  容：</label>
				<textarea name="" id="" class="text"></textarea>
				<span class="tr">字数限制为5-200个</span>
			</div>
			<button class="btm" type="submit"></button>
		</form>
	</div><!--quiz_content end-->
</div><!--quiz end-->
</center>
</body>
</html>

JS代码(comment.js):

// star choosejQuery.fn.rater= function(options){
	// 榛樿鍙傛暟var settings ={
	enabled:true,url:'',method:'post',min:1,max:5,step:1,value:null,after_click:null,before_ajax:null,after_ajax:null,title_format:null,info_format:null,image:'images/comment/stars.jpg',imageAll:'images/comment/stars-all.gif',defaultTips:true,clickTips:true,width:24,height:24}
;
	// 鑷畾涔夊弬鏁?if(options){
	jQuery.extend(settings,options);
}
//澶栧鍣?var container= jQuery(this);
	// 涓诲鍣?var content= jQuery('<ul class="rater-star"></ul>');
	content.css('background-image','url(' + settings.image + ')');
	content.css('height',settings.height);
	content.css('width',(settings.width*settings.step) * (settings.max-settings.min+settings.step)/settings.step);
	//鏄剧ず缁撴灉鍖哄煙var result= jQuery('<div class="rater-star-result"></div>');
	container.after(result);
	//鏄剧ず鐐瑰嚮鎻愮ずvar clickTips= jQuery('<div class="rater-click-tips"><span>鐐瑰嚮鏄熸槦灏卞彲浠ヨ瘎鍒嗕簡</span></div>');
	if(!settings.clickTips){
	clickTips.hide();
}
container.after(clickTips);
	//榛樿鎵嬪舰鎻愮ずvar tipsItem= jQuery('<li class="rater-star-item-tips"></li>');
	tipsItem.css('width',(settings.width*settings.step) * (settings.max-settings.min+settings.step)/settings.step);
	tipsItem.css('z-index',settings.max / settings.step + 2);
	if(!settings.defaultTips){
	//闅愯棌榛樿鐨勬彁绀?tipsItem.hide();
}
content.append(tipsItem);
	// 褰撳墠閫変腑鐨?var item= jQuery('<li class="rater-star-item-current"></li>');
	item.css('background-image','url(' + settings.image + ')');
	item.css('height',settings.height);
	item.css('width',0);
	item.css('z-index',settings.max / settings.step + 1);
	if (settings.value){
	item.css('width',((settings.value-settings.min)/settings.step+1)*settings.step*settings.width);
}
;
	content.append(item);
	// 鏄熸槦for (var value=settings.min;
	value<=settings.max;
	value+=settings.step){
	item= jQuery('<li class="rater-star-item"><div class="popinfo"></div></li>');
	if (typeof settings.info_format == 'function'){
	//item.attr('title',settings.title_format(value));
	item.find(".popinfo").html(settings.info_format(value));
	item.find(".popinfo").css("left",(value-1)*settings.width)}
else{
	item.attr('title',value);
}
item.css('height',settings.height);
	item.css('width',(value-settings.min+settings.step)*settings.width);
	item.css('z-index',(settings.max - value) / settings.step + 1);
	item.css('background-image','url(' + settings.image + ')');
	if (!settings.enabled){
	// 鑻ユ槸涓嶈兘鏇存敼锛屽垯闅愯棌item.hide();
}
content.append(item);
}
content.mouseover(function(){
	if (settings.enabled){
	jQuery(this).find('.rater-star-item-current').hide();
}
}
).mouseout(function(){
	jQuery(this).find('.rater-star-item-current').show();
}
)// 娣诲姞榧犳爣鎮仠/鐐瑰嚮浜嬩欢var shappyWidth=(settings.max-2)*settings.width;
	var happyWidth=(settings.max-1)*settings.width;
	var fullWidth=settings.max*settings.width;
	content.find('.rater-star-item').mouseover(function(){
	jQuery(this).prevAll('.rater-star-item-tips').hide();
	jQuery(this).attr('class','rater-star-item-hover');
	jQuery(this).find(".popinfo").show();
	//褰?鍒嗘椂鐢ㄧ瑧鑴歌〃绀?if(parseInt(jQuery(this).css("width"))==shappyWidth){
	jQuery(this).addClass('rater-star-happy');
}
//褰?鍒嗘椂鐢ㄧ瑧鑴歌〃绀?if(parseInt(jQuery(this).css("width"))==happyWidth){
	jQuery(this).addClass('rater-star-happy');
}
//褰?鍒嗘椂鐢ㄧ瑧鑴歌〃绀?if(parseInt(jQuery(this).css("width"))==fullWidth){
	jQuery(this).removeClass('rater-star-item-hover');
	jQuery(this).css('background-image','url(' + settings.imageAll + ')');
	jQuery(this).css({
	cursor:'pointer',position:'absolute',left:'0',top:'0'}
);
}
}
).mouseout(function(){
	var outObj=jQuery(this);
	outObj.css('background-image','url(' + settings.image + ')');
	outObj.attr('class','rater-star-item');
	outObj.find(".popinfo").hide();
	outObj.removeClass('rater-star-happy');
	jQuery(this).prevAll('.rater-star-item-tips').show();
	//var startTip=function (){
	//outObj.prevAll('.rater-star-item-tips').show();
	//}
;
	//startTip();
}
).click(function(){
	//jQuery(this).prevAll('.rater-star-item-tips').css('display','none');
	jQuery(this).parents(".rater-star").find(".rater-star-item-tips").remove();
	jQuery(this).parents(".goods-comm-stars").find(".rater-click-tips").remove();
	jQuery(this).prevAll('.rater-star-item-current').css('width',jQuery(this).width());
	if(parseInt(jQuery(this).prevAll('.rater-star-item-current').css("width"))==happyWidth||parseInt(jQuery(this).prevAll('.rater-star-item-current').css("width"))==shappyWidth){
	jQuery(this).prevAll('.rater-star-item-current').addClass('rater-star-happy');
}
else{
	jQuery(this).prevAll('.rater-star-item-current').removeClass('rater-star-happy');
}
if(parseInt(jQuery(this).prevAll('.rater-star-item-current').css("width"))==fullWidth){
	jQuery(this).prevAll('.rater-star-item-current').addClass('rater-star-full');
}
else{
	jQuery(this).prevAll('.rater-star-item-current').removeClass('rater-star-full');
}
var star_count= (settings.max - settings.min) + settings.step;
	var current_number= jQuery(this).prevAll('.rater-star-item').size()+1;
	var current_value= settings.min + (current_number - 1) * settings.step;
	//鏄剧ず褰撳墠鍒嗗€?if (typeof settings.title_format == 'function'){
	jQuery(this).parents().nextAll('.rater-star-result').html(current_value+'鍒?nbsp;
	'+settings.title_format(current_value));
}
$("#StarNum").val(current_value);
	//jQuery(this).parents().next('.rater-star-result').html(current_value);
	//jQuery(this).unbind('mouseout',startTip)}
)jQuery(this).html(content);
}
// 鏄熸槦鎵撳垎$(function(){
	var options={
	max:5,title_format:function(value){
	var title = '';
	switch (value){
	case 1:title= '寰堜笉婊℃剰';
	break;
	case 2:title= '涓嶆弧鎰?;
	break;
	case 3:title= '涓€鑸?;
	break;
	case 4:title= '婊℃剰';
	break;
	case 5:title= '闈炲父婊℃剰';
	break;
	default:title = value;
	break;
}
return title;
}
,info_format:function(value){
	var info = '';
	switch (value){
	case 1:info= '<div class="info-box">1鍒?nbsp;
	寰堜笉婊℃剰<div>鍟嗗搧鏍峰紡鍜岃川閲忛兘闈炲父宸紝澶护浜哄け鏈涗簡锛?/div></div>';
	break;
	case 2:info= '<div class="info-box">2鍒?nbsp;
	涓嶆弧鎰?div>鍟嗗搧鏍峰紡鍜岃川閲忎笉濂斤紝涓嶈兘婊¤冻瑕佹眰銆?/div></div>';
	break;
	case 3:info= '<div class="info-box">3鍒?nbsp;
	涓€鑸?div>鍟嗗搧鏍峰紡鍜岃川閲忔劅瑙変竴鑸€?/div></div>';
	break;
	case 4:info= '<div class="info-box">4鍒?nbsp;
	婊℃剰<div>鍟嗗搧鏍峰紡鍜岃川閲忛兘姣旇緝婊℃剰锛岀鍚堟垜鐨勬湡鏈涖€?/div></div>';
	break;
	case 5:info= '<div class="info-box">5鍒?nbsp;
	闈炲父婊℃剰<div>鎴戝緢鍠滄锛佸晢鍝佹牱寮忓拰璐ㄩ噺閮藉緢婊℃剰锛屽お妫掍簡锛?/div></div>';
	break;
	default:info = value;
	break;
}
return info;
}
}
$('#rate-comm-1').rater(options);
}
);

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