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

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

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

ดูแล้ว 4,639 ครั้ง


ยิ่ง plugin มีการทำงาน หรือการกำหนดค่ามากขึ้น ตัวแปร และการส่งค่า
ก็จะมีจำนวนเพิ่มขึ้นเช่นกัน อย่างไรก็ตาม ไม่ได้หมายถึงว่า ทุกค่าที่กำหนด
จะต้องใช้งานเสมอไป 
 
ในเนื้อหาส่วนนี้ เป็นตอนที่ 4 ของเนื้อหาการสร้าง jquery plugin
และเป็นส่วนต่อเนื่องจากเนื้อหาก่อนหน้า
 
ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3  
 
ตามกล่าวข้างต้น เงื่อนไข หรือโจทย์คือ
อยากให้ 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 


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



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









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









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





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

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


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


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







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