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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现颜色打字机的完整代码
Mar 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实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python实现Adapter模式实例代码
2018/02/09 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Pycharm中如何关掉python console
2020/10/27 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
《赶海》教学反思
2014/04/20 职场文书
外贸业务员求职信
2014/06/16 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
早恋主题班会
2015/08/14 职场文书
电力培训学习心得体会
2016/01/11 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android