快捷導航

基于jQuery的星級評分插件

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

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

首先看一下運行效果如下圖所示。

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

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

 
$.fn.studyplay_star=function(options,callback){ 
//默認設(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 ; 
} 
}) 
} 
} 

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

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

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

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

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

您可能感興趣的文章: