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

05 February 2009 By Ninenik Narkdee
vote rating jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ vote rating jquery



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

 



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: vote jquery rating







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ