ยิ่ง plugin มีการทำงาน หรือการกำหนดค่ามากขึ้น ตัวแปร และการส่งค่า
ก็จะมีจำนวนเพิ่มขึ้นเช่นกัน อย่างไรก็ตาม ไม่ได้หมายถึงว่า ทุกค่าที่กำหนด
จะต้องใช้งานเสมอไป
ในเนื้อหาส่วนนี้ เป็นตอนที่ 4 ของเนื้อหาการสร้าง jquery plugin
และเป็นส่วนต่อเนื่องจากเนื้อหาก่อนหน้า
ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3
https://www.ninenik.com/content.php?arti_id=472 via @ninenik
ตามกล่าวข้างต้น เงื่อนไข หรือโจทย์คือ
อยากให้ plugin ที่เราสร้างขึ้น รองรับ css การกำหนด font-style เช่น ตัวเอียง
และ font-weight เช่น กำหนด อักษรตัวหนา
ดังนั้น เราจะเพิ่มค่าเริ่มต้น เข้าไปในไฟล์ plugin โดยค่าเริ่มต้นทั้ง 2 ค่า เรายังไม่รู้ว่า
จะกำหนดเป็นค่าอะไรดี จึงใช้เป็น null
1 2 3 4 5 6 7 8 | // ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น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 หรือ ค่าเริ่มต้นถ้ามี ก่อนเรียกใช้งาน
โดยเพิ่มการตรวจสอบดังนี้
1 2 3 4 5 6 7 8 9 10 | // ตรวจสอบค่า settings.fontStyle ว่ามีการกำหนดค่าหรือไม่ if(settings.fontStyle){ $(this).css( 'font-style', settings.fontStyle ); } // ตรวจสอบค่า settings.fontWeight ว่ามีการกำหนดค่าหรือไม่ if(settings.fontWeight){ $(this).css( 'font-weight', settings.fontWeight ); } // โค้ตสำหรับ การทำงานของ plugin}); |
และจะได้รูปแบบ plugin เป็นดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | // 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
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง