4.24 星星评价

4.24.1 显示分数效果

采用背景填充+百分比,可现实半颗星。

宝贝描述:
4.1
宝贝描述:
4.5

HTML代码

<div class="clearfix">
	<span class="f-l f-14 va-m">宝贝描述:</span>
	<div class="star-bar star-bar-show size-M f-l va-m mr-10">
		<span class="star" style="width:82%"></span>
	</div>
	<strong class="f-l f-14 va-m">4.1</strong>
</div>

通过.size-M,和.size-S 控制星星的大小。

CSS代码

.star-bar-show{background:url(../images/star/iconpic-star-S-default.png) repeat-x 0 0}
.star-bar-show .star{background:url(../images/star/iconpic-star-S.png) repeat-x 0 0;}
.star-1{width:20%;}
.star-2{ width:40%}
.star-3{width:60%;}
.star-4{ width:80%}
.star-5{ width:100%}
.star-bar-show.size-M{width:120px;height:24px}
.star-bar-show.size-M,.star-bar-show.size-M .star{background-size:24px}
.star-bar-show.size-M .star{ height:24px}
.star-bar-show.size-S{width:80px; height:16px}
.star-bar-show.size-S,.star-bar-show.size-S .star{background-size:16px}
.star-bar-show.size-S .star{ height:16px}

显示不需要脚本。只有在点评的时候需要脚本。

4.24.2 打分效果

宝贝描述:
宝贝描述:

HTML代码

<div class="clearfix">
	<span class="f-l f-15 va-m">描述相符:</span>
	<div id="star-1" class="star-bar size-M f-l mr-10 va-m"></div>
	<strong id="result-1" class="f-l va-m"></strong>
</div>

通过.size-M,和.size-S 控制星星的大小。

CSS代码

.star-bar{font-size:0; line-height:0}
.star-bar .star{display:inline-block;text-align:center;}
/*中*/
.size-M img{ width:24px;height:24px}
/*小*/
.size-S img{width:16px;height:16px}

JS代码

引入jQuery 和 jquery.raty.js

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.raty/2.4.5/jquery.raty.js"></script>
$(function(){
	$("#star-1").raty({
hints: ['1','2', '3', '4', '5'],//自定义分数
starOff: 'iconpic-star-S-default.png',//默认灰色星星
starOn: 'iconpic-star-S.png',//黄色星星
path: 'http://static.h-ui.net/h-ui/images/star',//可以是相对路径
number: 5,//星星数量,要和hints数组对应
showHalf: true,
targetKeep : true,
click: function (score, evt) {//点击事件
//第一种方式:直接取值
$("#result-1").html('你的评分是'+score+'分');
}
});
$("#star-2").raty({
hints: ['1','2', '3', '4', '5'],
starOff: 'iconpic-star-S-default.png',
starOn: 'iconpic-star-S.png',
path: 'http://static.h-ui.net/h-ui/images/star',
number: 5,
showHalf: true,
targetKeep : true,
click: function (score, evt) {//点击事件
//第一种方式:直接取值
$("#result-2").html('你的评分是'+score+'分');
}
}); });

相关参数

参数 默认值 说明
number 10 星星数量,默认10颗
hints ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100' ] 星星对应的分数设置,一定要和星星数量(number参数)相对应
path images/ 图片存放目录环境
starOff star-off.png 默认星星图片(依赖path参数)
starOn star-on.png 激活状态星星图片(依赖path参数)
cancel false 取消
cancelHint 取消评级 取消后的显示文案
cancelOff cancel-off.png 取消按钮默认状态,(依赖path参数)
cancelOn cancel-on.png 取消按钮激活状态,(依赖path参数)
readOnly false 只读模式
score undefined 默认选中星星数量(数字)
click undefined 点击事件,回调函数,此处返回打分结果。