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

       if(isset($_POST['action'])) { if(htmlentities($_POST['action'], ENT_QUOTES, 'UTF-8') == 'rating') { $videoId = intval($_POST['vId']); $rate = floatval($_POST['rate']); $userId = intval($_POST['uId']); $rateTime = date("m-d-Y H:i:s"); $sql = "insert into Rating values($videoId,$rate,$userId,$rateTime)"; $_SGLOBAL['db']->query($sql); } } 

 

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