JQuery评级插件之JRating

在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为该文件的路径,调用数据库操作,完成评级数据的保存。

      

  1. if(isset($_POST['action']))  
  2. {  
  3.     if(htmlentities($_POST['action'], ENT_QUOTES, 'UTF-8') == 'rating')  
  4.     {  
  5.         $videoId = intval($_POST['vId']);  
  6.         $rate = floatval($_POST['rate']);  
  7.         $userId = intval($_POST['uId']);  
  8.         $rateTime = date("m-d-Y H:i:s");  
  9.           
  10.         $sql = "insert into Rating values($videoId,$rate,$userId,$rateTime)";  
  11.         $_SGLOBAL['db']->query($sql);  
  12.     }  
  13. }  
 

 

      这样,使用JRating插件就很好的完成了用户对视频的评级功能。另外,由于icons文件是独立的,开发人员可以自己设计喜欢的星星样式,很好很强大的插件!

如何实现 重复评分:

http://topic.csdn.net/u/20110419/12/b8b58e54-4805-4763-853c-d6217fb1bda1.html


参考: http://blog.csdn.net/kangqing2003/article/details/6215736


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值