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

02 March 2014 เขียนเมื่อ 9 ปีก่อน โดย 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 ได้

DEMO 1

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

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

26 Feb
2014

เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1 อ่าน 8,362
1. สร้างโฟลเดอร์ สำหรับเก็บไฟล์ jQuery plugin ที่เราจะสร้าง ที่นี้สร้างในโฟลเ
27 Feb
2014

jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2 อ่าน 9,353
ตอนที่ 2 เป็นการทำความเข้าใจ การทำงาน ของสวนต่างๆ อย่างง่าย เพื่อให้พอได้
28 Feb
2014

ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3 อ่าน 5,842
การส่ง options เข้าไปใน jquery plugin นั้น สามารถได้ไม่ยาก ก่อ
01 Mar
2014

ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4 อ่าน 4,396
ยิ่ง plugin มีการทำงาน หรือการกำหนดค่ามากขึ้น ตัวแปร และการส่งค่า ก็จะมีจ
กำลังอ่านเนื้อหานี้อยู่

02 Mar
2014

การส่งค่า เรียกใช้งาน ฟังก์ชั่น ใน jquery plugin ตอนที่ 5 อ่าน 6,367
การเพิ่มชุดคำสั่ง ฟังก์ชั่นใน plugin สามารถเรียกใช้งาน options ที่เป็น ฟั

Tags:: jquery jquery plugin

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน