jQuery星级评分插件
2024-04-10 03:07:03
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery星级评分插件DEMO演示</title>
<style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}p{margin:20px 0 10px 0;}
</style>
</head>
<body><div style="width:400px;margin:50px auto;"><p style="font-size:20px">请给出你的评分(百分制)：</p><div id="star1"></div><div id="result1"></div><p style="font-size:20px">请给出你的评分(十分制)：</p><div id="star2"></div><div id="result2"></div></div>
</body>
</html>
<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>
<script type="text/javascript">rat('star1','result1',10);rat('star2','result2',1);function rat(star,result,m){star= '#' + star;result= '#' + result;$(result).show();//将结果DIV隐藏
$(star).raty({hints: ['10','20', '30', '40', '50','60', '70', '80', '90', '100'],path: "css/img",starOff: 'star-off-big.png',starOn: 'star-on-big.png',size: 24,start: 40,showHalf: true,target: result,targetKeep : true,//targetKeep 属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标悬停时有值，而鼠标离开后这个值就会消失
click: function (score, evt) {//第一种方式：直接取值
alert('你的评分是'+score*m+'分');}});/*第二种方式可以设置一个隐蔽的HTML元素来保存用户的选择值，然后可以在脚本里面通过jQuery选中这个元素来处理该值。 弹出结果var text = $(result).text();$('img').click(function () {if ($(result).text() != text) {alert('你的评分是'+$(result).text()/m+'分');alert(result);return;}});*/}
</script>JS插件
/*!* jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty* -------------------------------------------------------------------** jQuery Raty is a plugin that generates a customizable star rating.** Licensed under The MIT License** @version 2.4.5* @since 2010.06.11* @author Washington Botelho* @documentation wbotelhos.com/raty* @twitter twitter.com/wbotelhos** Usage:* -------------------------------------------------------------------* $('#star').raty();** <div id="star"></div>**/;(function($) {var methods = {init: function(settings) {return this.each(function() {var self = this,$this = $(self).empty();self.opt = $.extend(true, {}, $.fn.raty.defaults, settings);$this.data('settings', self.opt);self.opt.number = methods.between(self.opt.number, 0, 20);if (self.opt.path.substring(self.opt.path.length - 1, self.opt.path.length) != '/') {self.opt.path += '/';}if (typeof self.opt.score == 'function') {self.opt.score = self.opt.score.call(self);}if (self.opt.score) {self.opt.score = methods.between(self.opt.score, 0, self.opt.number); }for (var i = 1; i <= self.opt.number; i++) {$('<img />', {src : self.opt.path + ((!self.opt.score || self.opt.score < i) ? self.opt.starOff : self.opt.starOn),alt : i,title : (i <= self.opt.hints.length && self.opt.hints[i - 1] !== null) ? self.opt.hints[i - 1] : i}).appendTo(self);if (self.opt.space) {$this.append((i < self.opt.number) ? ' ' : '');}}self.stars = $this.children('img:not(".raty-cancel")');self.score = $('<input />', { type: 'hidden', name: self.opt.scoreName }).appendTo(self);if (self.opt.score && self.opt.score > 0) {self.score.val(self.opt.score);methods.roundStar.call(self, self.opt.score);}if (self.opt.iconRange) {methods.fill.call(self, self.opt.score); }methods.setTarget.call(self, self.opt.score, self.opt.targetKeep);var space = self.opt.space ? 4 : 0,width = self.opt.width || (self.opt.number * self.opt.size + self.opt.number * space);if (self.opt.cancel) {self.cancel = $('<img />', { src: self.opt.path + self.opt.cancelOff, alt: 'x', title: self.opt.cancelHint, 'class': 'raty-cancel' });if (self.opt.cancelPlace == 'left') {$this.prepend(' ').prepend(self.cancel);} else {$this.append(' ').append(self.cancel);}width += (self.opt.size + space);}if (self.opt.readOnly) {methods.fixHint.call(self);if (self.cancel) {self.cancel.hide();}} else {$this.css('cursor', 'pointer');methods.bindAction.call(self);}$this.css('width', width);});}, between: function(value, min, max) {return Math.min(Math.max(parseFloat(value), min), max);}, bindAction: function() {var self = this,$this = $(self);$this.mouseleave(function() {var score = self.score.val() || undefined;methods.initialize.call(self, score);methods.setTarget.call(self, score, self.opt.targetKeep);if (self.opt.mouseover) {self.opt.mouseover.call(self, score);}});var action = self.opt.half ? 'mousemove' : 'mouseover';if (self.opt.cancel) {self.cancel.mouseenter(function() {$(this).attr('src', self.opt.path + self.opt.cancelOn);self.stars.attr('src', self.opt.path + self.opt.starOff);methods.setTarget.call(self, null, true);if (self.opt.mouseover) {self.opt.mouseover.call(self, null);}}).mouseleave(function() {$(this).attr('src', self.opt.path + self.opt.cancelOff);if (self.opt.mouseover) {self.opt.mouseover.call(self, self.score.val() || null);}}).click(function(evt) {self.score.removeAttr('value');if (self.opt.click) {self.opt.click.call(self, null, evt);}});}self.stars.bind(action, function(evt) {var value = parseInt(this.alt, 10);if (self.opt.half) {var position = parseFloat((evt.pageX - $(this).offset().left) / self.opt.size),diff = (position > .5) ? 1 : .5;value = parseFloat(this.alt) - 1 + diff;methods.fill.call(self, value);if (self.opt.precision) {value = value - diff + position;}methods.showHalf.call(self, value);} else {methods.fill.call(self, value);}$this.data('score', value);methods.setTarget.call(self, value, true);if (self.opt.mouseover) {self.opt.mouseover.call(self, value, evt);}}).click(function(evt) {self.score.val((self.opt.half || self.opt.precision) ? $this.data('score') : this.alt);if (self.opt.click) {self.opt.click.call(self, self.score.val(), evt);}});}, cancel: function(isClick) {return $(this).each(function() {var self = this, $this = $(self);if ($this.data('readonly') === true) {return this;}if (isClick) {methods.click.call(self, null);} else {methods.score.call(self, null);}self.score.removeAttr('value');});}, click: function(score) {return $(this).each(function() {if ($(this).data('readonly') === true) {return this;}methods.initialize.call(this, score);if (this.opt.click) {this.opt.click.call(this, score);} else {methods.error.call(this, 'you must add the "click: function(score, evt) { }" callback.');}methods.setTarget.call(this, score, true);});}, error: function(message) {$(this).html(message);$.error(message);}, fill: function(score) {var self = this,number = self.stars.length,count = 0,$star ,star ,icon ;for (var i = 1; i <= number; i++) {$star = self.stars.eq(i - 1);if (self.opt.iconRange && self.opt.iconRange.length > count) {star = self.opt.iconRange[count];if (self.opt.single) {icon = (i == score) ? (star.on || self.opt.starOn) : (star.off || self.opt.starOff);} else {icon = (i <= score) ? (star.on || self.opt.starOn) : (star.off || self.opt.starOff);}if (i <= star.range) {$star.attr('src', self.opt.path + icon);}if (i == star.range) {count++;}} else {if (self.opt.single) {icon = (i == score) ? self.opt.starOn : self.opt.starOff;} else {icon = (i <= score) ? self.opt.starOn : self.opt.starOff;}$star.attr('src', self.opt.path + icon);}}}, fixHint: function() {var $this = $(this),score = parseInt(this.score.val(), 10),hint = this.opt.noRatedMsg;if (!isNaN(score) && score > 0) {hint = (score <= this.opt.hints.length && this.opt.hints[score - 1] !== null) ? this.opt.hints[score - 1] : score;}$this.data('readonly', true).css('cursor', 'default').attr('title', hint);this.score.attr('readonly', 'readonly');this.stars.attr('title', hint);}, getScore: function() {var score = [],value ;$(this).each(function() {value = this.score.val();score.push(value ? parseFloat(value) : undefined);});return (score.length > 1) ? score : score[0];}, readOnly: function(isReadOnly) {return this.each(function() {var $this = $(this);if ($this.data('readonly') === isReadOnly) {return this;}if (this.cancel) {if (isReadOnly) {this.cancel.hide();} else {this.cancel.show();}}if (isReadOnly) {$this.unbind();$this.children('img').unbind();methods.fixHint.call(this);} else {methods.bindAction.call(this);methods.unfixHint.call(this);}$this.data('readonly', isReadOnly);});}, reload: function() {return methods.set.call(this, {});}, roundStar: function(score) {var diff = (score - Math.floor(score)).toFixed(2);if (diff > this.opt.round.down) {var icon = this.opt.starOn; // Full up: [x.76 .. x.99]if (diff < this.opt.round.up && this.opt.halfShow) { // Half: [x.26 .. x.75]icon = this.opt.starHalf;} else if (diff < this.opt.round.full) { // Full down: [x.00 .. x.5]icon = this.opt.starOff;}this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + icon);} // Full down: [x.00 .. x.25]}, score: function() {return arguments.length ? methods.setScore.apply(this, arguments) : methods.getScore.call(this);}, set: function(settings) {this.each(function() {var $this = $(this),actual = $this.data('settings'),clone = $this.clone().removeAttr('style').insertBefore($this);$this.remove();clone.raty($.extend(actual, settings));});return $(this.selector);}, setScore: function(score) {return $(this).each(function() {if ($(this).data('readonly') === true) {return this;}methods.initialize.call(this, score);methods.setTarget.call(this, score, true);});}, setTarget: function(value, isKeep) {if (this.opt.target) {var $target = $(this.opt.target);if ($target.length == 0) {methods.error.call(this, 'target selector invalid or missing!');}var score = value;if (!isKeep || score === undefined) {score = this.opt.targetText;} else {if (this.opt.targetType == 'hint') {score = (score === null && this.opt.cancel)? this.opt.cancelHint: this.opt.hints[Math.ceil(score - 1)];} else {score = this.opt.precision? parseFloat(score).toFixed(1): parseInt(score, 10);}}if (this.opt.targetFormat.indexOf('{score}') < 0) {methods.error.call(this, 'template "{score}" missing!');}if (value !== null) {score = this.opt.targetFormat.toString().replace('{score}', score);}if ($target.is(':input')) {$target.val(score);} else {$target.html(score);}}}, showHalf: function(score) {var diff = (score - Math.floor(score)).toFixed(1);if (diff > 0 && diff < .6) {this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + this.opt.starHalf);}}, initialize: function(score) {score = !score ? 0 : methods.between(score, 0, this.opt.number);methods.fill.call(this, score);if (score > 0) {if (this.opt.halfShow) {methods.roundStar.call(this, score);}this.score.val(score);}}, unfixHint: function() {for (var i = 0; i < this.opt.number; i++) {this.stars.eq(i).attr('title', (i < this.opt.hints.length && this.opt.hints[i] !== null) ? this.opt.hints[i] : i);}$(this).data('readonly', false).css('cursor', 'pointer').removeAttr('title');this.score.attr('readonly', 'readonly');}};$.fn.raty = function(method) {if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method) {return methods.init.apply(this, arguments);} else {$.error('Method ' + method + ' does not exist!');} };$.fn.raty.defaults = {cancel : false,cancelHint : 'cancel this rating!',cancelOff : 'cancel-off.png',cancelOn : 'cancel-on.png',cancelPlace : 'left',click : undefined,half : false,halfShow : true,hints : ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100' ],iconRange : undefined,mouseover : undefined,noRatedMsg : 'not rated yet',number : 10,path : 'img/',precision : false,round : { down: .25, full: .6, up: .76 },readOnly : false,score : undefined,scoreName : 'score',single : false,size : 16,space : true,starHalf : 'star-half.png',starOff : 'star-off.png',starOn : 'star-on.png',target : undefined,targetFormat : '{score}',targetKeep : false,targetText : '',targetType : 'hint',width : undefined};})(jQuery);转载于:https://www.cnblogs.com/binmengxue/p/7235292.html
jQuery星级评分插件相关推荐
- jQuery Raty星级评分插件使用方法
转载自 jQuery Raty星级评分插件使用方法 使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com ...
- php星级评分,jQuery_基于jQuery的星级评分插件，首先看一下运行效果如下图所 - phpStudy...
基于jQuery的星级评分插件 首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮. 一.原理本程序的原理是这样的:一个&qu ...
- html 评分五角星的插件,jquery五角星评分插件示例分享
jQuery五角星评分插件 #rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repea ...
- 推荐10款 好用的 Jquery 评分插件
Raty jQuery Raty这是一个能够自动生成可定制的星级评分jQuery插件.可以自定义图标,创建各种评级组合,星星数量,每一颗星星的注释,可以在当一个星星被点击时的加回调函数. 地址: Ra ...
- 星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享，前面有一篇原生js实现星级评 - phpStudy...
使用jQuery实现星级评分代码分享 前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. http://s.thsi.cn/js/jquery-1.7.2. ...
- 一个非常棒的jQuery 评分插件--好东西要分享
现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现.比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但 ...
- php评星,jQuery+PHP星级评分实现方法
搜索热词 本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate ...
- html的星星评分效果,利用jQuery实现星星打分评分插件
特效描述:利用jQuery实现 星星打分 评分插件.利用jQuery实现星星打分评分插件 代码结构 1. 引入JS 2. HTML代码 $("#star_grade").marki ...
- 基于Vue的星级评分
年前的一个项目中做到一个星级评分功能,以前都是用jquery.raty.js这款插件来做的,这个插件确实封装的很方便也很好用,但是毕竟是一个函数库(考虑各种适配,健壮,可扩展),代码行数还是有一点的, ...
- php mysql 星级评分_jQuery+PHP星级评分实现方法_jquery
本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate.亮星星d ...
最新文章
- web touch 事件
- 【转载】Android数据库(SqlLite)操作和db文件查看
- QT的QColor 类的使用
- 题目 1083: Hello, world!
- Spring Boot（09）——使用SpringMVC
- python实战1.0——爬取知乎某问题下的回复
- （原创）一个简洁通用的调用DLL函数的帮助类
- Python日志保存 -- print内容输出到txt文件、nohup时的输出保存
- 【毕业设计源码】基于SSM的小程序任务调度管理信息系统设计与实现
- 冠捷云计算机功能,USB3.0显示器亮相！AOC多款LCD新品赏
- NetXray嗅探器介绍
- .NET前后分离解决方案
- MJB，阿里又一次成功的营销？
- 2013-07-22 码市-武汉 返程票
- 《C语言程序设计》第4版 何钦铭、颜晖主编 课后习题答案 第4章 习题4
- 【Hibernate步步为营】--详解基本映射
- 小米电视不能访问电脑共享文件的解决方案
- 前端开发者如何规划并构建UCD的中长期前端开发能力与团队
- 国产化云平台如何实现多云管控，黄河云来“打样儿”
- matlab学习四，一元函数绘图方法