快捷導(dǎo)航

基于jQuery的星級(jí)評(píng)分插件

更新時(shí)間：2011年08月12日 11:23:12 作者：

以前寫過(guò)一篇文章以jquery為基礎(chǔ)的星星評(píng)分，今天有時(shí)間把這個(gè)功能重寫，并以jQuery插件的形式出現(xiàn)以便以后使用。

首先看一下運(yùn)行效果如下圖所示。

鼠標(biāo)移到星星上該星星前面的所有星星全部變亮，鼠標(biāo)單擊將記錄點(diǎn)擊的星星數(shù)，前面的所有星星將變亮。
一、原理
本程序的原理是這樣的：一個(gè)“ul”標(biāo)簽，該標(biāo)簽的背景為灰色的星星，控制“ul”標(biāo)簽的寬度顯示星星的數(shù)量。例如：一個(gè)星星圖片的寬度為23px，那么要顯示10個(gè)星星，則“ul”的寬度為230px就可以顯示10個(gè)星星。
n個(gè)“l(fā)i”標(biāo)簽，n表示您要顯示星星的個(gè)數(shù)，例如你要顯示10個(gè)星星那么將有10個(gè)“l(fā)i”標(biāo)簽。那么這10個(gè)標(biāo)簽的寬度分別為1個(gè)星星的寬度23px，2個(gè)星星的寬度46px，......，10個(gè)星星的寬度230px。這些“l(fā)i”標(biāo)簽的背景將為藍(lán)色的星星。
則另外還有一個(gè)“l(fā)i”標(biāo)簽記錄鼠標(biāo)單擊的星星或初始設(shè)置。
這些標(biāo)簽都是重疊在一起的，通過(guò)鼠標(biāo)滑動(dòng)效果切換這些標(biāo)簽的層疊順序，顯示不同的星星數(shù)量，單擊記錄星星個(gè)數(shù)。
二、源碼

復(fù)制代碼代碼如下:

 
$.fn.studyplay_star=function(options,callback){ 
//默認(rèn)設(shè)置 
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) 
//回調(diào)函數(shù) 
if (typeof callback == 'function') { 
callback(studyplay_count); 
return ; 
} 
}) 
} 
} 

這個(gè)插件有兩個(gè)參數(shù)一個(gè)是options表示插件的一些基本設(shè)置；callback表示回調(diào)函數(shù)，該函數(shù)存在一個(gè)參數(shù)表示用戶選擇的星星數(shù)量。
三、使用
如果我們想在id為“z”的div上顯示5個(gè)星星，默認(rèn)有一顆星星選中，彈出選擇星星的個(gè)數(shù)對(duì)話框，就可以如下編寫代碼：

復(fù)制代碼代碼如下:

 
<div id="z"></div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#z").studyplay_star({MaxStar:5,CurrentStar:2},function(value){alert(value)}); 
}); 
</script> 

如果想顯示評(píng)分結(jié)果可以把Enabled設(shè)置false就ok了
四、代碼下載

經(jīng)網(wǎng)友反映說(shuō)火狐下面存在這問(wèn)題，今天進(jìn)行了調(diào)試進(jìn)行了修改主要是因?yàn)闃邮街衛(wèi)i標(biāo)簽沒(méi)有定義高度引起的，現(xiàn)在已經(jīng)修正，謝謝朋友們?；鸷拚嫦螺d地址：
star2.rar
真心的謝謝網(wǎng)友們
第三次修改：添加0.5分評(píng)分功能
使用說(shuō)明：其中half等于0表示一分一分的增加，1表示0.5的增加
例如：$("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){alert(value)});
下載地址：halfstar2.rar

您可能感興趣的文章: