PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4

01 March 2014 By


ยิ่ง plugin มีการทำงาน หรือการกำหนดค่ามากขึ้น ตัวแปร และการส่งค่า
ก็จะมีจำนวนเพิ่มขึ้นเช่นกัน อย่างไรก็ตาม ไม่ได้หมายถึงว่า ทุกค่าที่กำหนด
จะต้องใช้งานเสมอไป 
 
ในเนื้อหาส่วนนี้ เป็นตอนที่ 4 ของเนื้อหาการสร้าง jquery plugin
และเป็นส่วนต่อเนื่องจากเนื้อหาก่อนหน้า
 
ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3  
http://www.ninenik.com/content.php?arti_id=472 via @ninenik
 
ตามกล่าวข้างต้น เงื่อนไข หรือโจทย์คือ
อยากให้ plugin ที่เราสร้างขึ้น รองรับ css การกำหนด font-style เช่น ตัวเอียง
และ font-weight เช่น กำหนด อักษรตัวหนา
 
ดังนั้น เราจะเพิ่มค่าเริ่มต้น เข้าไปในไฟล์ plugin โดยค่าเริ่มต้นทั้ง 2 ค่า เรายังไม่รู้ว่า
จะกำหนดเป็นค่าอะไรดี จึงใช้เป็น null

		// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
		var defaults={
			foreground:"red", // กำหนดสีข้อความ
			background:"yellow", // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
			fontStyle:null,	// การกำหนด font-style เช่น ตัวเอียง
			fontWeight:null		// 	font-weight เช่น กำหนด อักษรตัวหนา
		};
	 
 
จากค่าเริ่มต้นด้านบน 2 ค่าที่กำหนดเป็นค่า null ทำให้ เราไม่สามารถเรียกใช้งาน
ตัวแปร object ทั้ง 2 ค่านั้นได้ทันที
 
settings.fontStyle การกำหนด font-style เช่น ตัวเอียง
settings.fontWeight  font-weight เช่น กำหนด อักษรตัวหนา
 
ดังนั้น ในโค้ตสำหรับ การทำงานของ plugin เราจึงต้องเพิ่มการตรวจสอบ
การส่งค่า options หรือ ค่าเริ่มต้นถ้ามี ก่อนเรียกใช้งาน
 
โดยเพิ่มการตรวจสอบดังนี้

			// ตรวจสอบค่า settings.fontStyle ว่ามีการกำหนดค่าหรือไม่
			if(settings.fontStyle){
				$(this).css( 'font-style', settings.fontStyle );
			}
			// ตรวจสอบค่า settings.fontWeight ว่ามีการกำหนดค่าหรือไม่
			if(settings.fontWeight){
				$(this).css( 'font-weight', settings.fontWeight );
			}			
			// โค้ตสำหรับ การทำงานของ plugin
		});
 
และจะได้รูปแบบ 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 เช่น กำหนด อักษรตัวหนา
		};
	 
	 	// ส่วนสำหรับ  เป็นต้วแปร รับค่า 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 );
			}			
			// โค้ตสำหรับ การทำงานของ plugin
		});
	 
	};

})(jQuery); 
 
เท่านี้ก็ทำให้เรา สามารถ รู้ถึงวิธีการตรวจสอบค่า options ก่อนใช้งานได้
และหมาะสำหรับ การกำหนดโค้ดคำสั่ง plugin ที่จะมีการเรียกใช้งาน
ตัวแปร ที่ยังไม่ได้กำหนดค่าไว้ แต่มีการสร้างชุดคำสั่งไว้รองรับแล้วได้เช่นกัน
 
ในตอนที่ 5 เราจะมาดูวิธีการเพิ่ม ฟังก์ชั่น เข้าไปใน plugin 

Tags:: jquery jquery plugin





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