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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
10个实用的脚本代码工具
May 04 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
vue-router的HTML5 History 模式设置
Sep 08 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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基本函数汇总
2015/07/09 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js切换光标示例代码
2013/10/10 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
初三学习决心书
2014/03/11 职场文书
精神病医院见习报告
2014/11/03 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
公司表扬稿范文
2015/05/05 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android