快捷導(dǎo)航

jquery星級(jí)插件、支持頁面中多次使用

更新時(shí)間：2012年03月25日 21:16:55 作者：

一個(gè)關(guān)于jquery星級(jí)插件的博文，那是我從網(wǎng)上收集的，它只支持一個(gè)頁面中使用一次，多次使用的話會(huì)發(fā)生沖突，達(dá)不到我項(xiàng)目的需求，沒辦法，只能修改它

效果圖如下：

css所需背景圖片：

二話不說，帖代碼：
html代碼

 
<div class="xing"> 
<span style="float: left">總體評(píng)價(jià):<font color="#CC3300" size="-1">*</font></span><div 
class="rating-wrap"> 
<ul id="xing1"> 
<li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="30" data-hint="還行" title="還行" class="three-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars"> 
</a></li> 
</ul> 
</div> 
<span class="xing1">點(diǎn)擊星星開始打分</span> 
</div> 
<divclass="xing"> 
<span style="float: left">廣告效果:<font color="#CC3300"size="-1">*</font></span><div 
class="rating-wrap"> 
<ulid="xing2"> 
<li><a href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="30" data-hint="還行" title="還行" class="three-stars "> 
</a></li> 
<li><a href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars"> 
</a></li> 
<li><a href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars"> 
</a></li> 
</ul> 
</div> 
<span class="xing2">點(diǎn)擊星星開始打分</span> 
</div> 

JS代碼

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

 
<script type="text/javascript" src="js/jQuery_1.42.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".rating-wrap a").mouseover(function(){ 
$(this).parent().siblings().find("a").removeClass("active-star"); 
$(this).addClass("active-star"); 
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")) 
}).mouseleave(function(){ 
var selectID=$(this).parent().parent().attr("id")+"select"; 
$(this).removeClass("active-star"); 
if($("#"+selectID).length==0) 
{ 
$("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("點(diǎn)擊星星開始打分"); 
} 
else 
{ 
$("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint")); 
$("#"+selectID).addClass("active-star"); 
} 
}).click(function(){ 
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select"); 
$(this).parent().siblings().find("a").attr("id",""); 
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint"); 
}) 
}) 
</script> 

css代碼

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

 
<style> 
.item-rank-rst, .user-rank-rst, .rating-wrap ul, .rating-wrap a:hover, .rating-wrap .active-star, .user-m-star, .urr-rank60, .breadcrumb .note { 
background-image: url(xing_bg.png);/**-----星級(jí)插件背景圖片----**/ 
background-repeat: no-repeat; 
} 
.rating-wrap { 
background: none repeat scroll 0 0 #FFF9F1; 
border: 1px solid #EFE0D7; 
display: inline-block; 
float: left; 
height: 20px; 
margin-right: 5px; 
padding: 4px 0 0 5px; 
position: relative; 
top: -2px; 
width: 89px; 
z-index: 0; 
} 
.rating-wrap ul { 
background-position: 0 -250px; 
height: 16px; 
position: relative; 
width: 85px; 
z-index: 10; 
} 
.rating-wrap li { 
display: inline; 
} 
.rating-wrap a { 
display: block; 
height: 16px; 
left: 0; 
position: absolute; 
top: 0; 
} 
.rating-wrap .five-stars { 
background-position: 0 -160px; 
width: 84px; 
z-index: 10; 
} 
.rating-wrap .four-stars { 
background-position: 0 -178px; 
width: 68px; 
z-index: 20; 
} 
.rating-wrap .three-stars { 
background-position: 0 -196px; 
width: 51px; 
z-index: 30; 
} 
.rating-wrap .two-stars { 
background-position: 0 -214px; 
width: 34px; 
z-index: 40; 
} 
.rating-wrap .one-star { 
background-position: 0 -232px; 
width: 17px; 
z-index: 50; 
} 
.rating-block .hint { 
color: #999999; 
float: left; 
} 
.active-hint { 
color: #CC0000; 
} 
.rating-block .err-hint { 
color: #EE0000; 
font-weight: bold; 
} 
</style> 