แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle

06 November 2010 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

jquery jquery ui

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

jQuery UI มี effect ที่น่าสนใจ สามารถนำมาประยุกต์ใช้ได้อย่างหลากหลาย เช่น กับระบบการเรียนการสอน ใช้กับร้านค้า ตะกร้าสินค้า แบบ ajax หรืออื่นๆ

สำหรับส่วนที่จะแนะนำในครั้งนี้ จะเป็นเพียงส่วนหนึ่ง คือ แบบ ไม่ต้องใช้งานกับ event show hide และ toggle

สามารถเข้าไปศึกษาเพิ่มเติม ทั้งหมดได้ด้วยตัวเองที่
docs.jquery.com/UI/Effects

ตัวอย่าง

shake

bounce

highlight

pulsate

size

transfer

โค้ดตัวอย่าง ทั้งหมด และคำอธิบายโค้ด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery ui effect part 1</title>
<style type="text/css">
*{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
}
div.i_pink {
	font-weight:bold;
	color:#000;
	margin: 0px;
	width: 100px;
	height: 40px;
	background: pink;
	border: 1px solid black;
	position: relative;
}
div.i_yellow {
	font-weight:bold;
	color:#000;	
	margin: 0px;
	width: 100px;
	height: 40px;
	background: yellow;
	border: 1px solid black;
	position: relative;
}
div.i_violet {
	font-weight:bold;
	color:#FFF;		
	margin: 0px;
	width: 100px;
	height: 40px;
	background: violet;
	border: 1px solid black;
	position: relative;
}
div.i_blue {
	font-weight:bold;
	color:#FFF;		
	margin: 0px;
	width: 100px;
	height: 40px;
	background: blue;
	border: 1px solid black;
	position: relative;
}
div.i_black {
	font-weight:bold;
	color:#FFF;		
	margin: 0px;
	width: 100px;
	height: 40px;
	background: black;
	border: 1px solid black;
	position: relative;
}
div.i_green {
	font-weight:bold;
	color:#FFF;		
	margin: 0px;
	width: 100px;
	height: 40px;
	background: green;
	border: 1px solid black;
	position: relative;
}
div.i_red {
	margin-top: 20px;
	width: 50px;
	height: 30px;
	background: red;
	border: 1px solid black;
	position: relative;
	visibility:hidden;
}

/* css สำหรับการใช้งาน effect transfer  */
.ui-effects-transfer {
	border: 2px dotted black;
/*	background: green;*/
}
</style>


</head>

<body>


<div style="margin:auto;width:75%;text-align:center;">

<div class="i_violet">shake</div>
<br />
<div class="i_blue">bounce</div>
<br />
<div class="i_black">highlight</div>
<br />
<div class="i_yellow">pulsate</div>
<br />
<div class="i_pink">size</div>
<br />
<div class="i_green">transfer</div>
<div class="i_red"></div>

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>  
<script type="text/javascript">
$(function(){

	$("div.i_violet").click(function(){ // เมื่อคลิกที่ div class=i_violet 
		 $(this).effect("shake", { // กำหนด effect ให้เป็น shake
		 	direction:'right',  // ทิศทาง  up | down | left | right  ถ้าไม่กำหนด จะเป็น left
			distance:100, //  ระยะห่าง หน่วยเป็น pixels ถ้าไม่กำหนด ค่าเริ่มต้นจะเป็น 20
		 	times:3  // จำนวนครั้งที่กระทำ ถ้าไม่กำหนด ค่าเริ่มต้น เท่ากับ 3 ครั้ง
		 }, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
		 function(){ // 
		//	alert("finished");  // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
		 });
	});


	$("div.i_blue").click(function () {  // เมื่อคลิกที่ div class=i_blue 
		  $(this).effect("bounce",{ // กำหนด effect ให้เป็น bounce
		 	direction:'up',  // ทิศทาง  up | down | left | right  ถ้าไม่กำหนด จะเป็น up
			distance:100, //  ระยะห่าง หน่วยเป็น pixels ถ้าไม่กำหนด ค่าเริ่มต้นจะเป็น 20
			mode:'show', // กำหนดใช้กับ กรณี show | hide ถ้าไม่กำหนด ค่าเริ่มต้นเป็น effect  ที่ใช้งานอยู่
		 	times:3  // จำนวนครั้งที่กระทำ ถ้าไม่กำหนด ค่าเริ่มต้น เท่ากับ 5 ครั้ง
		 }, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
		 function(){ // 
		//	alert("finished");  // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
		 });
	});

	$("div.i_black").mouseover(function () { // เมื่อเลื่อนเมาส์มาอยู่เหนือ div class=i_black
	  	$(this).effect("highlight", { // กำหนด effect ให้เป็น highlight
			color:'#00ff00', // กำหนดสีพื้นหลัง สำหรับ hilight
			mode:'show' // กำหนดใช้กับ กรณี show | hide ถ้าไม่กำหนด ค่าเริ่มต้นเป็น  show  
		 }, 300, // ระยะเวลาที่แสดง effect 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
		 function(){ // 
		//	alert("finished");  // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
		 });
	});
	
	$("div.i_yellow").click(function(){  // เมื่อคลิกที่ div class=i_yellow 
		$(this).effect("pulsate", {  // กำหนด effect ให้เป็น pulsate
			mode:'show', // กำหนดใช้กับ กรณี show | hide ถ้าไม่กำหนด ค่าเริ่มต้นเป็น  show  
		 	times:3  // จำนวนครั้งที่กระทำ ถ้าไม่กำหนด ค่าเริ่มต้น เท่ากับ 5 ครั้ง
		 }, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
		 function(){ // 
		//	alert("finished");  // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
		 });
	});


	$("div.i_pink").click(function(){  // เมื่อคลิกที่ div class=i_pink 
		 $(this).effect("size", { // กำหนด effect ให้เป็น size
		 	origin:['bottom','right'],  //  ทิศทางการปรับขนาด [ top | middle | bottom ,  left | center | right ]
		 	from:{ // กำหนดขนาดเริ่มต้น  ปกติไม่ต้องกำหนด 
				width:10,
				height:10				
			},
		 	to:{ //  กำหนดปรับขนาดเป็น
				width:200,
				height:60
			},			
			scale:'both'  // both | box | content 
		 }, 1000, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
		 function(){ // 
		//	alert("finished");  // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
		 });		
	});


	// ส่วนสุดท้าย เป็นการใช้ effect transfer แปลงร่าง จะเพิ่มโค้ดประยุกต์เข้าไป ให้เป็นตัวอย่าง
	$("div.i_green").click(function () {  // เมื่อคลิกที่ div class=i_green 
			$(this).css("visibility","hidden"); // กำหนดให้ div นี้ให้มองไม่เห็น
			$(this).effect("transfer", { // กำหนด effect ให้เป็น transfer
				className:'i_green', // กำหนด class ของ effect ให้คล้ายกับ div class=i_green
				to: $("div.i_red")  // ให้เปลี่ยนไปเป็น  div class=i_red ที่ทำให้มองไม่เห็นไว้ ด้วย css 
			}, 300, // effect แต่ละครั้งใน 0.3 วินาที โดย 1000 เท่ากับ 1 วินาที
			function(){
				//	alert("finished");  // กำหนดสิ่งที่ต้องการให้กระทำเมื่อ จบ effect
				$("div.i_red").css("visibility","visible"); // แสดง div class=i_red 
				// ตั้งเวลาให้กลับไปเริ่มต้นใหม่ เพื่อแสดงอีกครั้ง
				setTimeout(function(){
					$("div.i_red").css("visibility","hidden");
					$("div.i_green").css("visibility","visible");
				},1000);
		});		 
	});	
	
	
});
</script>

</body>
</html>

จากตัวอย่างการใช้งาน effect ใน jQuery UI ดังกล่าวข้างต้น เป็นการเขียนแบบ เต็มให้เห็นว่า มีอะไรบ้าง

ในแต่ละ effect การใช้งานจริง สามารถเขียนแบบย่อให้สั้นลงได้ ตามรูปแบบ ดังนี้

$(xxxx).effect("effect name",{option},time duration);
// เช่น
$("div.i_violet").effect("shake",{time:3},300); 
// เป็นต้น

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

Tags:: jquery ui jquery

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

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