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 相关文章推荐
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
vue-loader教程介绍
Jun 14 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 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实现异步操作的研究
2013/02/03 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
innerText 使用示例
2014/01/23 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python常用编译器原理及特点解析
2020/03/23 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
学生安全教育材料
2014/02/14 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
金融管理应届生求职信
2014/02/20 职场文书
开学季活动策划方案
2014/02/28 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
实习介绍信模板
2015/01/30 职场文书
项目安全员岗位职责
2015/02/15 职场文书
工地材料员岗位职责
2015/04/11 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
时尚女魔头观后感
2015/06/04 职场文书
入党后的感想
2015/08/10 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python