在web开发中常常遇到对某些内容(如:文章、视频、图片等)进行评价的功能,在淘宝等电子商务平台上,也常常可以见到相似功能:对某商家信用或者商品服务质量进行等级评定。
在目前开发的系统中,需要实现对视频和图片的星级评价,在网上找到JRating,非常的给力,在此记录下。
JRating是一款基于JQuery开发的评级插件,官方网址:http://www.myjqueryplugins.com/jRating。
JRating可以用于构建Ajax星级评级系统,它可以对显示的星级进行显示设置,同时该插件支持任何脚本语言进行数据传输,如:php等。
1、文件目录结构
从官方网站上可以下载其源码,目录结构如下:
jquery目录包含了jRating实现的js和css文件。icons文件夹是等级显示的图片文件。
2、开发说明
同所有JQuery插件的使用方式基本一致,在html页面引用JRating的js和css文件。然后编写相应的html或脚本代码。
<div class="exemple1" data="18_3"></div>
相应的javascript脚本:
$('.exemple1').jRating({
type:'small',
length : 40,
decimalLength : 1
});
展示效果如下:
3、JRating参数说明
bigStarsPath ---- 大星图片路径;
smallStarsPath ---- 小星图片路径;
phpPath ---- 用于进行Ajax处理的PHP页面路径;
type ---- 显示类型(大星或者小星),值为small或者big;
step ---- 是否一个星一个星的填充等级,值为true或者false;
isDisabled ---- 是否可用,值为true或者false;
length ---- 显示的星星数量,默认值为5;
rateMax ---- 最大比率,默认值20;
rateInfosX,rateInfosY ---- 鼠标移动的相对位置。
4、使用PHP脚本完成评级数据的保存
建立RatingData.php文件,在jRating参数中设置phpPath为该文件的路径,调用数据库操作,完成评级数据的保存。
这样,使用JRating插件就很好的完成了用户对视频的评级功能。另外,由于icons文件是独立的,开发人员可以自己设计喜欢的星星样式,很好很强大的插件!