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做的一个随机点名程序
Feb 13 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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
第七节--类的静态成员
2006/11/16 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP小教程之实现链表
2014/06/09 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
看了就知道什么是JSON
2007/12/09 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
浅析Python requests 模块
2020/10/09 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
妇女儿童发展规划实施方案
2014/03/16 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android