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

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

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

ดูแล้ว 6,618 ครั้ง


การส่ง options เข้าไปใน jquery plugin นั้น สามารถได้ไม่ยาก
 
ก่อนอื่น เนื้อหานี้ ต่อจากเนื้อหาตอนที่ 2
 
jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2
https://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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



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









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









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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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