PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

28 February 2014 By Ninenik Narkdee
jquery jquery plugin

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



การส่ง 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 หรือไม่ 








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



Tags:: jquery jquery plugin






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


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