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

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
vote jquery rating

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



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 rating jquery







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











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