jQuery Raty 一款不错的星级评分插件


Posted in Javascript onAugust 24, 2016

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

一、展示

jQuery Raty 一款不错的星级评分插件

二、使用教程

①、下载插件

https://github.com/wbotelhos/raty

②、导入文件

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

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

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

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

④、新增raty的div

<form class="form-horizontal required-validate"
 method="post">

 <div class="form-group">
  <label for="" class="col-md-2 control-label">评价星级</label>
  <div class="col-md-10">
   <div class="raty" name="level" data-bv-notempty>${good_comment.level}</div>
  </div>
 </div>

  <div class="form-group text-center ">
   <div class="col-md-11 col-md-offset-1">
    <button type="submit" class="btn btn-primary">保存商品评价</button>
   </div>
  </div>
</form>

 1.创建一个div即可。
 2.指定class属性为raty,为页面加载时初始化raty组件。
 3.指定name为level,作为传递到后台数据的parameter的name。
 4.指定当前bootstrap validator的filed域为notempty,表单提交时必须选中至少一个星。
 5.在div中进行赋值,通过text内容设置raty的值。 

⑤、初始化raty的div

// 找到raty的div
$("div.raty", $p).each(function() {
 var $this = $(this);
 YUNM.debug('div.raty' + $this.selector);

 // 获取初始化值
 var score = $this.text();
 // 置空
 $this.text("");
 // 获取name值,为后面bootstrap validator的filed
 var name = $this.attr("name");

 // 初始化raty
 $this.raty({
  // 设置值
  score : score,
  size : 24,
  // The name of hidden field generated by Raty
  scoreName : name,
  // Re-validate the star rating whenever user change it
  click : function(score, evt) {
   if ($this.parents().length > 0) {
    // 找到form表单
    var $form = $this.parents().find("form.required-validate", $p);

    if ($form.length > 0) {
     var data = $form.data('bootstrapValidator');
     // 如果有值,设置表单验证通过
     if (score > 0) {
      data.updateStatus(name, 'VALID');
     }
    }
   }
  }
 });
});

⑥、后台获取

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
angularJS中router的使用指南
Feb 09 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 #Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 #Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 #Javascript
深入浅析JavaScript中的3DES
Aug 24 #Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 #Javascript
JavaScript lodash常见用法系列小结
Aug 24 #Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 #Javascript
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
php过滤危险html代码
2008/08/18 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
给护士表扬信
2014/01/19 职场文书
现场施工员岗位职责
2014/03/10 职场文书
腾讯广告词
2014/03/19 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
欢送领导祝酒词
2015/08/12 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Ajax实现异步加载数据
2021/11/17 Javascript
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis