基于jQuery的星级评分插件 |
|
本文标签：星级评分 首先看一下运行效果如下图所示 。
鼠标移到星星上该星星前面的所有星星全部变亮，鼠标单击将记录点击的星星数，前面的所有星星将变亮 。 复制代码 代码如下: $.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 |
