最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于jQuery星级评分插件使用
时间:2011-08-12 编辑:简简单单 来源:一聚教程网
今天有时间把这个功能重写,并以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('
.find('.studyplay_starBg').width(settings.MaxStar*settings.StarWidth)
.html('');
if(settings.Enabled)
{
var ListArray = "";
for(k=1;k
ListArray +='';
}
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个星星,默认有一颗星星选中,弹出选择星星的个数对话框,就可以如下编写代码:
如果想显示评分结果 可以把Enabled设置false就ok了
使用说明:其中half等于0表示一分一分的增加,1表示0.5的增加
例如:$("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){alert(value)});
实例下载地址:http://down.111com.net/mbs/2011/08/12/halfstar2.rar
-
上一个: select挡住div的解决方法
-
下一个: 基于jquery图片左右滚动效果源码