基于jQuery的星级评分插件


Posted in Javascript onAugust 12, 2011

首先看一下运行效果如下图所示。

基于jQuery的星级评分插件

    鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮。
一、原理
本程序的原理是这样的:一个“ul”标签,该标签的背景为灰色的星星,控制“ul”标签的宽度显示星星的数量。例如:一个星星图片的宽度为23px,那么要显示10个星星,则“ul”的宽度为230px就可以显示10个星星。
n个“li”标签,n表示您要显示星星的个数,例如你要显示10个星星那么将有10个“li”标签。那么这10个标签的宽度分别为1个星星的宽度23px,2个星星的宽度46px,......,10个星星的宽度230px。这些“li”标签的背景将为蓝色的星星。
则另外还有一个“li”标签记录鼠标单击的星星或初始设置。
这些标签都是重叠在一起的,通过鼠标滑动效果切换这些标签的层叠顺序,显示不同的星星数量,单击记录星星个数。
二、源码

$.fn.studyplay_star=function(options,callback){ 
//默认设置 
var settings ={ 
MaxStar :20, 
StarWidth :23, 
CurrentStar :5, 
Enabled :true 
}; 
if(options) { jQuery.extend(settings, options); }; 
var container = jQuery(this); 
container.css({"position":"relative"}) 
.html('<ul class="studyplay_starBg"></ul>') 
.find('.studyplay_starBg').width(settings.MaxStar*settings.StarWidth) 
.html('<li class="studyplay_starovering" style="width:'+settings.CurrentStar*settings.StarWidth+'px; z-index:0;" id="studyplay_current"></li>'); 
if(settings.Enabled) 
{ 
var ListArray = ""; 
for(k=1;k<settings.MaxStar+1;k++) 
{ 
ListArray +='<li class="studyplay_starON" style="width:'+settings.StarWidth*k+'px;z-index:'+(settings.MaxStar-k+1)+';"></li>'; 
} 
container.find('.studyplay_starBg').append(ListArray) 
.find('.studyplay_starON').hover(function(){ 
$("#studyplay_current").hide(); 
$(this).removeClass('studyplay_starON').addClass("studyplay_starovering"); 
}, 
function(){ 
$(this).removeClass('studyplay_starovering').addClass("studyplay_starON"); 
$("#studyplay_current").show(); 
}) 
.click(function(){ 
var studyplay_count = settings.MaxStar - $(this).css("z-index")+1; 
$("#studyplay_current").width(studyplay_count*settings.StarWidth) 
//回调函数 
if (typeof callback == 'function') { 
callback(studyplay_count); 
return ; 
} 
}) 
} 
}

这个插件有两个参数一个是options表示插件的一些基本设置;callback表示回调函数,该函数存在一个参数表示用户选择的星星数量。
三、使用
如果我们想在id为“z”的div上显示5个星星,默认有一颗星星选中,弹出选择星星的个数对话框,就可以如下编写代码:
<div id="z"></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#z").studyplay_star({MaxStar:5,CurrentStar:2},function(value){alert(value)}); 
}); 
</script>

如果想显示评分结果 可以把Enabled设置false就ok了
四、代码下载

经网友反映说火狐下面存在这问题,今天进行了调试进行了修改 主要是因为样式中li标签没有定义高度引起的,现在已经修正,谢谢朋友们。火狐修正版下载地址:
star2.rar 
真心的谢谢网友们
第三次修改:添加0.5分评分功能
使用说明:其中half等于0表示一分一分的增加,1表示0.5的增加
例如:$("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){alert(value)});
下载地址:halfstar2.rar

Javascript 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 #Javascript
JavaScript中的View-Model使用介绍
Aug 11 #Javascript
仿jQuery的siblings效果的js代码
Aug 09 #Javascript
html中table数据排序的js代码
Aug 09 #Javascript
最常用的12种设计模式小结
Aug 09 #Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 #Javascript
javascript 主动派发事件总结
Aug 09 #Javascript
You might like
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python中 Lambda表达式全面解析
2016/11/28 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python实现双色球随机选号
2020/01/01 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
C#笔试题
2015/07/14 面试题
村干部培训班主持词
2014/03/28 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
超级礼物观后感
2015/06/15 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
html5调用摄像头截图功能
2022/01/18 Javascript