ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4
เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdeejquery jquery plugin
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery jquery plugin
ดูแล้ว 4,639 ครั้ง
ไปที่
Copy
ยิ่ง 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
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
อ่านต่อที่บทความ
-
02 Mar2014การส่งค่า เรียกใช้งาน ฟังก์ชั่น ใน jquery plugin ตอนที่ 5 อ่าน 6,656
การเพิ่มชุดคำสั่ง ฟังก์ชั่นใน plugin สามารถเรียกใช้งาน options ที่เป็น ฟั
เนื้อหาที่เกี่ยวข้อง
-
26 Feb2014เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1 อ่าน 8,690
1. สร้างโฟลเดอร์ สำหรับเก็บไฟล์ jQuery plugin ที่เราจะสร้าง ที่นี้สร้างในโฟลเ
-
27 Feb2014jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2 อ่าน 9,758
ตอนที่ 2 เป็นการทำความเข้าใจ การทำงาน ของสวนต่างๆ อย่างง่าย เพื่อให้พอได้
-
28 Feb2014ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3 อ่าน 6,160
การส่ง options เข้าไปใน jquery plugin นั้น สามารถได้ไม่ยาก ก่อ
-
กำลังอ่านเนื้อหานี้อยู่01 Mar2014ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4 อ่าน 4,639
ยิ่ง plugin มีการทำงาน หรือการกำหนดค่ามากขึ้น ตัวแปร และการส่งค่า ก็จะมีจ
-
02 Mar2014การส่งค่า เรียกใช้งาน ฟังก์ชั่น ใน jquery plugin ตอนที่ 5 อ่าน 6,656
การเพิ่มชุดคำสั่ง ฟังก์ชั่นใน plugin สามารถเรียกใช้งาน options ที่เป็น ฟั
Tags::
jquery plugin
jquery
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ