ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
jquery plugin jquery

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



การส่ง options เข้าไปใน jquery plugin นั้น สามารถได้ไม่ยาก
 
ก่อนอื่น เนื้อหานี้ ต่อจากเนื้อหาตอนที่ 2
 
jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2
http://www.ninenik.com/content.php?arti_id=471 via @ninenik
 
ส่งค่า options เพื่อเติมเข้าไปใน plugin
 
<script type="text/javascript">
$(function(){
	// การเรียกใช้งาน plug in 
	$(".i_h4").setbackground({
		background:"green" // ส่งค่า options เพื่อเติมเข้าไปใน plugin
	});
});
</script>

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

<!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({
		background:"green" // ส่งค่า options เพื่อเติมเข้าไปใน plugin
	});
});
</script>
</body>
</html>
 
ต่อไปมาดู หากมีการส่งค่าหลายค่า จะกำหนดอย่างไร
โดยเราจะมีการเพิ่ม สีของ ข้อความเข้าไป
 
ให้มาแก้ไขที่ไฟล์ plugin ก่อน โดยพิ่มค่าเริ่มต้นดังนี้

	 
		// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
		var defaults={
			foreground:"red", // กำหนดสีข้อความ
			background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
		};
 
จากค่าด้านบน เราจะได้ตัวแปร object 
 
settings.foreground เป็นค่าสี ของข้อความ เป็นค่าเริ่มต้น สีแดง
 
และเปลี่ยนโค้ด ทำงานของ plugin เป็น
 
	 	/// คืนค่ากลับ การทำงานของ plugin
		return this.each(function() {
			$(this).css({
				"background-color":settings.background,
				"color":settings.foreground
			});
			// โค้ตสำหรับ การทำงานของ plugin
		});

จะได้รูปแบบ plugin ใหม่ ดังนี้

// JavaScript Document
(function($){
	// setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า  setbackground
	$.fn.setbackground = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
	 
		// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
		var defaults={
			foreground:"red", // กำหนดสีข้อความ
			background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
		};
	 
	 	// ส่วนสำหรับ  เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
		var settings = $.extend( {}, defaults, options );
		
	 	/// คืนค่ากลับ การทำงานของ plugin
		return this.each(function() {
			$(this).css({
				"background-color":settings.background,
				"color":settings.foreground
			});
			// โค้ตสำหรับ การทำงานของ 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
	});
});
</script>
</body>
</html>
 
 
ในตอนที่ 4 จะแนะนำวิธีการตรวจสอบค่า options ว่ามีการส่งค่า
เข้าไปใน plugin หรือไม่ 


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



อ่านต่อที่บทความ









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



Tags:: jquery jquery plugin







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ