jQuery Raty - 不错的星级评分插件

谁践踏了优雅 2021-09-11 01:24 426阅读 0赞

在做商品评价时，一般情况下，我们需要一个星级评分的组件，而jQuery Raty恰好满足我们的需求。

一、展示

图片描述

二、使用教程

①、下载插件

https://github.com/wbotelhos/raty

②、导入文件

  1. <script type="text/javascript" src="${ctx}/components/raty/jquery.raty.js"></script>
  2. <link type="text/css" rel="stylesheet" href="${ctx}/components/raty/jquery.raty.css" />

③、设置raty的全局图片路径

  1. $.fn.raty.defaults.path = common.ctx + '/components/raty/images';

主要是指定五角星的显示样式，可以是五角星，也可以是其他。

④、新增raty的div

  1. <form class="form-horizontal required-validate"
  2.     method="post">
  4.     <div class="form-group">
  5.         <label for="" class="col-md-2 control-label">评价星级</label>
  6.         <div class="col-md-10">
  7.             <div class="raty" name="level" data-bv-notempty>${good_comment.level}</div>
  8.         </div>
  9.     </div>
  11.         <div class="form-group text-center ">
  12.             <div class="col-md-11 col-md-offset-1">
  13.                 <button type="submit" class="btn btn-primary">保存商品评价</button>
  14.             </div>
  15.         </div>
  16. </form>
  1. 创建一个div即可。
  2. 指定class属性为raty，为页面加载时初始化raty组件。
  3. 指定name为level，作为传递到后台数据的parameter的name。
  4. 指定当前bootstrap validator的filed域为notempty，表单提交时必须选中至少一个星。
  5. 在div中进行赋值，通过text内容设置raty的值。

⑤、初始化raty的div

  1. // 找到raty的div
  2. $("div.raty", $p).each(function() { 
  3.     var $this = $(this);
  4.     YUNM.debug('div.raty' + $this.selector);
  6.     // 获取初始化值
  7.     var score = $this.text();
  8.     // 置空
  9.     $this.text("");
  10.     // 获取name值，为后面bootstrap validator的filed
  11.     var name = $this.attr("name");
  13.     // 初始化raty
  14.     $this.raty({
  15.         // 设置值
  16.         score : score,
  17.         size : 24,
  18.         // The name of hidden field generated by Raty
  19.         scoreName : name,
  20.         // Re-validate the star rating whenever user change it
  21.         click : function(score, evt) { 
  22.             if ($this.parents().length > 0) {
  23.                 // 找到form表单
  24.                 var $form = $this.parents().find("form.required-validate", $p);
  26.                 if ($form.length > 0) {
  27.                     var data = $form.data('bootstrapValidator');
  28.                     // 如果有值，设置表单验证通过
  29.                     if (score > 0) {
  30.                         data.updateStatus(name, 'VALID');
  31.                     }
  32.                 }
  33.             }
  34.         }
  35.     });
  36. });

⑥、后台获取

可直接通过level从request中进行获取。

  1. int level = Integer.parseInt(request.getParameter("level"));

发表评论

表情：
评论列表 （有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 星级评分组件

    Vue 星级评分组件 描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctr

    向右看齐向右看齐/ 0 赞/ 85 阅读