基于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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
vue源码中的检测方法的实现
Sep 26 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
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
python对字典进行排序实例
2014/09/25 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
python爬取微信公众号文章的方法
2019/02/26 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
银行服务感言
2014/03/01 职场文书
学历公证委托书
2014/04/09 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
sql注入报错之注入原理实例解析
2022/06/10 MySQL
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis