PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


การส่งค่า เรียกใช้งาน ฟังก์ชั่น ใน jquery plugin ตอนที่ 5

02 March 2014 By Ninenik Narkdee
jquery plugin jquery

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



การเพิ่มชุดคำสั่ง ฟังก์ชั่นใน plugin สามารถเรียกใช้งาน options
ที่เป็น ฟังก์ชั่น ใน plugin ได้
 
เนื้อหาตอนที่ 5 นี้ต่อเนื่องจากเนื้อหาก่อนหน้า 
ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4
http://www.ninenik.com/content.php?arti_id=473 via @ninenik
 
ในที่นี้จะเพิ่มค่าเริ่มต้นชื่อ complete เป็น ฟังก์ชั่นเข้าไป ตามด้านล่าง

		// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
		var defaults={
			foreground:"red", // กำหนดสีข้อความ
			background:"yellow", // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
			fontStyle:null,	// การกำหนด font-style เช่น ตัวเอียง
			fontWeight:null,		// 	font-weight เช่น กำหนด อักษรตัวหนา
			complete:function(){}	 // กำหนด ฟังก์ชั่น object
		};
 
จะได้ค่าตัวแปร object เพิ่มเข้ามาชื่อ
 
settings.complete เป็นตัวแปรฟังก์ชั่น
 
และในส่วน โค้ตสำหรับ การทำงานของ plugin  
ก่อนอื่นต้องตรวจสอบว่า ค่าที่ส่งเข้ามา ฟังก์ชั่นหรือไม่ 
โดยใช้คำสั่ง $.isFunction() ของ jquery
จากนั้น จะเรียกใช้งานฟังก์ชัน ด้วย .call()

			// ตรวจสอบว่า ค่าที่ส่งเข้ามา ฟังก์ชั่นหรือไม่ 	
			if($.isFunction( settings.complete ) ) {
				settings.complete.call( this ); // เรียกใช้ฟังก์ชั่นที่ส่งเข้ามา
			}		
 
หากไม่ได้กำหนด การเรียกใช้งานฟังก์ชั่นที่ส่งเข้ามา
ค่าที่ส่งเข้ามาเป็นฟังก์ชั่น ก็จะไม่สามารถทำงานได้

jquery plugin ทั้งหมด

// JavaScript Document
(function($){
	// setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า  setbackground
	$.fn.setbackground = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
	 
		// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
		var defaults={
			foreground:"red", // กำหนดสีข้อความ
			background:"yellow", // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
			fontStyle:null,	// การกำหนด font-style เช่น ตัวเอียง
			fontWeight:null,		// 	font-weight เช่น กำหนด อักษรตัวหนา
			complete:function(){}	 // กำหนด ฟังก์ชั่น object
		};
	 
	 	// ส่วนสำหรับ  เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
		var settings = $.extend( {}, defaults, options );
		
	 	/// คืนค่ากลับ การทำงานของ plugin
		return this.each(function() {
			$(this).css({
				"background-color":settings.background,
				"color":settings.foreground
			});
			// ตรวจสอบค่า settings.fontStyle ว่ามีการกำหนดค่าหรือไม่
			if(settings.fontStyle){
				$(this).css( 'font-style', settings.fontStyle );
			}
			// ตรวจสอบค่า settings.fontWeight ว่ามีการกำหนดค่าหรือไม่
			if(settings.fontWeight){
				$(this).css( 'font-weight', settings.fontWeight );
			}		
			// ตรวจสอบว่า ค่าที่ส่งเข้ามา ฟังก์ชั่นหรือไม่ 	
			if($.isFunction( settings.complete ) ) {
				settings.complete.call( this ); // เรียกใช้ฟังก์ชั่นที่ส่งเข้ามา
			}					
			// โค้ตสำหรับ การทำงานของ plugin
		});
	 
	};

})(jQuery); 

 
ต่อมา มาดูส่วนของการส่งค่า options ที่เป็นฟังก์ชั่น
สามารถทำได้ดังนี้

<!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> </title>
</head>

<body>

<div style="margin:auto;width:75%;">
<h4 class="i_h4">How to Create a Basic Plugin</h4>
<p>Sometimes you want to make a piece of functionality available throughout your code. </p>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="js/jquery.setbackground.js"></script>  
<script type="text/javascript">
$(function(){
	// การเรียกใช้งาน plug in 
	$(".i_h4").setbackground({
		foreground:"#FFFFFF", // ส่งค่า options สีข้อความ
		background:"green", // ส่งค่า options เพื่อเติมเข้าไปใน plugin
		complete:function(){ // 
			$(this).css("text-decoration","line-through");
		}		
	});
});
</script>
</body>
</html>
 
เท่านี้ก็สามารถเข้าใจ การกำหนด options ที่เป็นฟังก์ชั่น และ
การเรียกใช้งาน ใน jquery plugin ได้








เนื้อหาที่เกี่ยวข้อง



Tags:: jquery jquery plugin






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


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