jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2

27 February 2014 By Ninenik Narkdee

jquery jquery plugin

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

ตอนที่ 2 เป็นการทำความเข้าใจ การทำงาน ของสวนต่างๆ อย่างง่าย

เพื่อให้พอได้เห็นรูปแบบ

ต่อจากเนื้อหา ตอนแรก

เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1

http://www.ninenik.com/content.php?arti_id=470 via @ninenik

โดยในตอนนี้ เราจะไม่มีการส่งค่าเพิ่มเติม เข้าไปใน plugin

แต่จะมีการกำหนด ค่าเริ่มต้น เพื่อศึกษา การเรียกใช้งาน

เงื่อนไขง่ายๆ คือ ให้ plugin นี้ทำการเปลี่ยนสีพื้นหลัง เป็นสีเหลือง

เมื่อมีการเรียกใช้งาน

เราจะกำหนดค่าไปในส่วนนี้

	 
		// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
		var defaults={
			background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
		};

ดังนั้น ส่วน สำหรับเป็นตัวแปร object ที่มีการกำหนด ค่าเริ่มต้น

	 	// ส่วนสำหรับ  เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
		var settings = $.extend( {}, defaults, options );

หรือที่เราสามารถเขียนในรูปแบบนี้ก็ได้

		var settings = $.extend( {}, {
			background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
		}, options );

ก็จะทำให้เราได้ ค่าตัวแปร object ชื่อ

settings.background มีค่าเป็น yellow ตามที่กำหนด

ต่อจากนี้ เมื่อเราได้ค่า ตัวแปร ค่าสีพื้นหลังแล้ว เราจะเอาไปใช้งาน

โค้ตสำหรับ การทำงานของ plugin ของเราคือ แค่เปลี่ยนสีพื้นหลัง

ด้วย ฟังก์ชั่น css ของ jQuery

$(this).css("background-color",settings.background);

เท่านี้ plugin อย่างง่าย เมื่อมีการเรียกใช้งาน

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

})(jQuery);

ก็จะทำให้ พื้นหลัง ของ object ที่เรียกใช้งานมีพื้นหลังเป็นสีเหลือง

<!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();
});
</script>
</body>
</html>

เนื้อหาในตอนที่ 3 จะแสดงถึง วิธีการส่งค่า options เพื่อให้

plugin ของเราใช้งาน

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

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

26 Feb
2014

เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1 อ่าน 4,854
1. สร้างโฟลเดอร์ สำหรับเก็บไฟล์ jQuery plugin ที่เราจะสร้าง ที่นี้สร้างในโฟลเ
กำลังอ่านเนื้อหานี้อยู่

27 Feb
2014

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

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

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

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

Tags:: jquery plugin jquery

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

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