jQuery Raty星级评分插件使用方法实例分析


Posted in jQuery onNovember 25, 2019

本文实例讲述了jQuery Raty星级评分插件使用方法。分享给大家供大家参考,具体如下:

使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示:

使用方法很简单,首先从https://github.com/wbotelhos/raty下载raty的源代码(依赖于jquery)

然后在页面中引入相应的js文件、css文件、图片资源,在需要添加评分组件的元素上(比如span标签)添加下面的jquery代码即可:

$('span').raty();

以上为jQuery Raty的缺省使用方法,此外,该组件还支持丰富的传入参数和回调函数,例如:

设置jQuery Raty的初始评分:

评分回调函数

如果需要根据后台动态设置初始评分,可以使用回调函数实现。例如使用div中的data-attribute属性:

<div data-score="1"></div>
$('div').raty({
 score: function() {
  return $(this).attr('data-score');
 }
});

还可以改变星星的个数:

$('div').raty({ number: 10 });

只读模式:

$('div').raty({ readOnly: true, score: 3 });

点击事件:

$('div').raty({
 click: function(score, evt) {
  alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
 }
});

路径:

变更图标保存的位置,所有图标需要位于同一目录下,路径结尾的/不添加也可以

<div data-path="assets/images"></div>
$('div').raty({
 path: function() {
  return this.getAttribute('data-path');
 }
});

取消评分:

$('div').raty({ cancel: true });

全局改变设置:

你可以全局更改上述提到的所有设置 $.fn.raty.defaults.OPTION = VALUE;. 该语句必须添加在插件绑定之前。

$.fn.raty.defaults.path = assets;
$.fn.raty.defaults.cancel = true;

参数列表:

cancel   : false                     // Creates a cancel button to cancel the rating.
cancelClass : 'raty-cancel'                 // Name of cancel's class.
cancelHint : 'Cancel this rating!'             // The cancel's button hint.
cancelOff  : 'cancel-off.png'                // Icon used on active cancel.
cancelOn  : 'cancel-on.png'                // Icon used inactive cancel.
cancelPlace : 'left'                     // Cancel's button position.
click    : undefined                   // Callback executed on rating click.
half    : false                     // Enables half star selection.
halfShow  : true                      // Enables half star display.
hints    : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star.
iconRange  : undefined                   // Object list with position and icon on and off to do a mixed icons.
mouseout  : undefined                   // Callback executed on mouseout.
mouseover  : undefined                   // Callback executed on mouseover.
noRatedMsg : 'Not rated yet!'                // Hint for no rated elements when it's readOnly.
number   : 5                       // Number of stars that will be presented.
numberMax  : 20                       // Max of star the option number can creates.
path    : undefined                   // A global locate where the icon will be looked.
precision  : false                     // Enables the selection of a precision score.
readOnly  : false                     // Turns the rating read-only.
round    : { down: .25, full: .6, up: .76 }        // Included values attributes to do the score round math.
score    : undefined                   // Initial rating.
scoreName  : 'score'                    // Name of the hidden field that holds the score value.
single   : false                     // Enables just a single star selection.
space    : true                      // Puts space between the icons.
starHalf  : 'star-half.png'                // The name of the half star image.
starOff   : 'star-off.png'                 // Name of the star image off.
starOn   : 'star-on.png'                 // Name of the star image on.
target   : undefined                   // Element selector where the score will be displayed.
targetFormat: '{score}'                   // Template to interpolate the score in.
targetKeep : false                     // If the last rating value will be keeped after mouseout.
targetScore : undefined                   // Element selector where the score will be filled, instead of creating a new hidden field (scoreName option).
targetText : ''                       // Default text setted on target.
targetType : 'hint'                     // Option to choose if target will receive hint o 'score' type.
starType  : 'img'                     // Element used to represent a star.

回调函数列表:

$('div').raty('score');         // Get the current score.
$('div').raty('score', number);     // Set the score.
$('div').raty('click', number);     // Click on some star.
$('div').raty('readOnly', boolean);   // Change the read-only state.
$('div').raty('cancel', boolean);    // Cancel the rating. The last param force the click callback.
$('div').raty('reload');         // Reload the rating with the current configuration.
$('div').raty('set', { option: value }); // Reset the rating with new configurations.
$('div').raty('destroy');        // Destroy the bind and give you the raw element.
$('div').raty('move', number);      // Move the mouse to the given score point position.

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
Jquery让form表单异步提交代码实现
Nov 14 #jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
Jquery异步上传文件代码实例
Nov 13 #jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
jquery获取input输入框中的值
Nov 13 #jQuery
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php类自动加载器实现方法
2015/07/28 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
合作经营协议书范本
2014/04/17 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
党员转正意见怎么写
2015/06/03 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
如何撰写创业策划书
2019/06/27 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
如何使用flask将模型部署为服务
2021/05/13 Python