เพิ่มลูกเล่นการโหวด Vote หรือ Rating ด้วย jQuery และ CSS

CSS Code ตัวอย่าง

<style type="text/css">
body{
	font-size:12px;
	font-family:Tahoma, Geneva, sans-serif;	
}
.iVote,.iVote li{
	display:block;
	margin:0px;
	padding:0px;
	list-style:none;
	float:left;
}
.iVote{
	clear:both;		
	float:left;
}
.iVote li,.iVote li.VoteD{
	display:block;
	width:16px;
	height:15px;
	position:relative;
	background: url(images/jquery.ui.stars.gif) no-repeat 0 0;
	background-position: 0 -32px;
	margin-right:2px;
	cursor:pointer;
}
.iVote li.VoteD{
	background-position: 0 -64px;
}
.iVote li.VoteD2{
  background-position: 0 -48px;
}
span.showVoteText{
	padding-left:5px;	
	font-style:italic;
}
</style>

HTML Code ตัวอย่าง
 

<form id="form1" name="form1" method="post" action="">
  <table width="500" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="155">ความพอใจด้านบริการ</td>
      <td width="345">
  <ul class="iVote">
  <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input name="hScore1" type="hidden" id="hScore1" value="0" />
<span class="showVoteText"></span>      
      </td>
    </tr>
    <tr>
      <td>ความคุ้มค่า</td>
      <td><ul class="iVote">
  <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input name="hScore2" type="hidden" id="hScore2" value="0" />
<span class="showVoteText"></span></td>
    </tr>
    <tr>
      <td>ความพอใจในตัวสินค้า</td>
      <td>
<ul class="iVote">
  <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input name="hScore3" type="hidden" id="hScore3" value="0" />
<span class="showVoteText"></span>      
      </td>
    </tr>
  </table>


<br style="clear:both;" />
<input type="submit" name="button" id="button" value="Submit" />
</form>

Javascript Code ตัวอย่าง

<script language="javascript" src="js/jquery-1.4.1.min.js"></script>   
<script type="text/javascript">
$(function(){
	var arrTextVote=new Array("Not so great","Quite good","Good","Great!","Excellent!");
	$("ul.iVote li").mouseover(function(){
			var prObj=$(this).parent("ul");;
			var Clto=prObj.children("li").index($(this));
			var Clto2=Clto;
			Clto+=1;
			prObj.children("li:gt("+Clto2+")").removeClass("VoteD");		
			prObj.children("li:lt("+Clto+")").addClass("VoteD");
			prObj.nextAll("span.showVoteText:eq(0)").html(arrTextVote[Clto2]);
			var oldScore=prObj.next("input").val();
			prObj.mouseout(function(){
					prObj.children("li").removeClass("VoteD");		
					prObj.nextAll("span.showVoteText:eq(0)").html("");
			});
			
	});
	$("ul.iVote li").click(function(){
			var prObj=$(this).parent("ul");;
			if(prObj.children("li").hasClass("VoteD2")==false){			
			var Clto=prObj.children("li").index(this);
			var Clto2=Clto;
			Clto+=1;	
			prObj.next("input").val(Clto);	
			prObj.children("li:lt("+Clto+")").addClass("VoteD2");
			prObj.children("li:gt("+Clto+")").removeClass("VoteD");			
			prObj.children("li").unbind("mouseover");	
			prObj.unbind("mouseout");	
			prObj.nextAll("span.showVoteText:eq(0)")
			.html(arrTextVote[Clto2]);
			}
	});	
	
});
</script>

ตัวอย่าง

http://www.ninenik.com/demo/jquery_star_rating2.php