PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

02 March 2014 By


การเพิ่มชุดคำสั่ง ฟังก์ชั่นใน 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





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