1、把下面代码放在HTML指定位置
<div class="rate_ms clearfix">
<span>综合：</span>
<div class="rate-comm rate-comm3"></div>
</div>
<div class="rate_ms clearfix">
<span>行程：</span>
<div class="rate-comm rate-comm1"></div>
</div>
<div class="rate_ms clearfix">
<span>服务：</span>
<div class="rate-comm rate-comm2"></div>
</div>2、导入JS文件和CS文件
.rate_img{text-align: center;}
.rate_img p{margin-bottom: 0;}
.rate_img img{margin-bottom: 10px;}
.rate-control li label {
float: left;
padding: 10px 5px;
cursor: pointer;
}
.rate-control input {
vertical-align: text-bottom;
margin-right: 5px; float: left;
}
.tb-rate-ico.ico-good, .tb-rate-ico-bg.ico-good {
background-position: 0 -100px;
}
.tb-rate-ico.ico-neutral, .tb-rate-ico-bg.ico-neutral {
background-position: 0 -50px;
}
.tb-rate-ico.ico-bad, .tb-rate-ico-bg.ico-bad {
background-position: 0 0;
}
.tb-rate-ico {
width: 20px;
height: 18px;
float: left;
vertical-align: middle;
overflow: hidden;
}
.tb-rate-ico, .tb-rate-ico-bg { background: transparent url("../images/fla.png") no-repeat center top; }
.rate-control li .rate-score.rate-score-good { background-color: #ae0e16;visibility: visible; }
.rate-control li .rate-score.rate-score-normal { background-color: #F0CA01; }
.rate-control li .rate-score.rate-score-bad { background-color: #999; }
.rate-control li .rate-score {
text-align: center;
display: block;
color: #FFF;
line-height: 14px;margin-top: 5px;
padding: 2px;
float: left;
visibility: hidden;
margin-right: 5px;
}
.rate-text p{ display: none;}
.rate_text textarea{width: 100%; height:100px;padding: 10px;}
.rate_s{line-height: 30px; position: relative;}
.rate_s input{position: absolute; top:0; left:0;width: 80px; height:30px;filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0;}
.rate_s div{cursor: pointer; }
.rate_s i{margin-right: 5px;}
.rate_ctn{background: #ae0e16; display: inline-block;text-align: center;padding: 5px 20px; color: #ffffff;-webkit-border-radius:5px; -moz-border-radius: 5px;border-radius: 5px;-khtml-border-radius:5px; cursor: pointer;}
.rate_ms{margin-bottom: 8px;}
.rate_ms span{ float: left;}
.rate_ms .rate-comm{ float: left;}
/*满意度*/
/*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/in_bg.png) no-repeat; padding-top: 8px; width: 192px; margin-left: -14px; }
.popinfo .info-box { border: 1px solid #ae0e16; border-top: 0; padding: 0 5px; color: #ae0e16; background: #fff; }
.popinfo .info-box div { color: #333; }
/*.rater-click-tips { color: #333; margin-left: 10px; background: url(../images/infobox-bg-l.gif) no-repeat 0 0; width: 125px; height: 34px; padding-left: 16px; overflow: hidden; }*/
.rater-star-item-tips { height: 41px; overflow: hidden; }
.cur.rater-star-item-tips { display: block; }
.rater-star-result { color: #ae0e16; font-weight: bold; padding-left: 10px; float: left; }
.rate_con{ max-height:400px; overflow-y: auto;overflow-x: hidden;padding: 0px 20px;margin: 0px -15px;}
.rate_con .row{padding-bottom: 10px;border-bottom: 1px solid #d9d9d9;margin-bottom: 10px; }
.rate_con .row.last{padding: 0px; border-bottom: none;margin-bottom: 0px;}
/*满意度*/
// star choose
jQuery.fn.rater = function(options,i) {
// 默认参数
var settings = {
enabled : true,
url : '',
method : 'post',
min : 1,
max : 5,
step : 1,
value : i,
after_click : null,
before_ajax : null,
after_ajax : null,
title_format : null,
info_format : null,
image : '/Public/Home/images/stars.jpg',
imageAll :'/Public/Home/images/stars-all.jpg',
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();
//当3分时用笑脸表示
if(parseInt(jQuery(this).css("width"))==shappyWidth){
jQuery(this).addClass('rater-star-happy');
}
//当4分时用笑脸表示
if(parseInt(jQuery(this).css("width"))==happyWidth){
jQuery(this).addClass('rater-star-happy');
}
//当5分时用笑脸表示
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+'分 '+settings.title_format(current_value));
}
$("#StarNum").val(current_value);
jQuery(this).parents().nextAll('.rater-star-result').attr("data-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分 很不满意<div>商品样式和质量都非常差，太令人失望了！</div></div>';
break;
case 2 :
info = '<div class="info-box">2分 不满意<div>商品样式和质量不好，不能满足要求。</div></div>';
break;
case 3 :
info = '<div class="info-box">3分 一般<div>商品样式和质量感觉一般。</div></div>';
break;
case 4 :
info = '<div class="info-box">4分 满意<div>商品样式和质量都比较满意，符合我的期望。</div></div>';
break;
case 5 :
info = '<div class="info-box">5分 非常满意<div>我很喜欢！商品样式和质量都很满意，太棒了！</div></div>';
break;
default :
info = value;
break;
}
return info;
}
}
var options1 = {
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分 很不满意<div>再三提醒下，卖家超过一天才发货，耽误我的时间。</div></div>';
break;
case 2 :
info = '<div class="info-box">2分 不满意<div>卖家发货有点慢的，催了几次终于发货了。</div></div>';
break;
case 3 :
info = '<div class="info-box">3分 一般<div>卖家发货速度一般，提醒后才发货的。</div></div>';
break;
case 4 :
info = '<div class="info-box">4分 满意<div>卖家发货还算及时。</div></div>';
break;
case 5 :
info = '<div class="info-box">5分 非常满意<div>卖家发货速度非常快。</div></div>';
break;
default :
info = value;
break;
}
return info;
}
}
var options2 = {
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分 很不满意<div>商品样式和质量都非常差，太令人失望了！</div></div>';
break;
case 2 :
info = '<div class="info-box">2分 不满意<div>商品样式和质量不好，不能满足要求。</div></div>';
break;
case 3 :
info = '<div class="info-box">3分 一般<div>商品样式和质量感觉一般。</div></div>';
break;
case 4 :
info = '<div class="info-box">4分 满意<div>商品样式和质量都比较满意，符合我的期望。</div></div>';
break;
case 5 :
info = '<div class="info-box">5分 非常满意<div>我很喜欢！商品样式和质量都很满意，太棒了！</div></div>';
break;
default :
info = value;
break;
}
return info;
}
}
// $('.rate-comm1').rater(options);
// $('.rate-comm2').rater(options1);
var a = $('.rate-comm1').attr('data-val');
var b = $('.rate-comm2').attr('data-val');
var c = $('.rate-comm3').attr('data-val');
$('.rate-comm1').rater(options,a);
$('.rate-comm2').rater(options1,b);
$('.rate-comm3').rater(options2,c);
//$('#rate-comm-3').rater(options);
//$('#rate-comm-4').rater(options1);
});
1951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
