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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
浅谈关于iview表单验证的问题
Sep 29 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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的5个安全措施小结
2012/07/17 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
JavaScript 自定义事件之我见
2017/09/25 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python Tkinter版学生管理系统
2019/02/20 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
小露珠教学反思
2014/04/30 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
典型事迹材料范文
2014/12/29 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
立春观后感
2015/06/18 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android