JQuery评级插件之JRating

    技术2022-05-20  35

          在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文件是独立的,开发人员可以自己设计喜欢的星星样式,很好很强大的插件!

     


    最新回复(0)