การส่ง options เข้าไปใน jquery plugin นั้น สามารถได้ไม่ยาก
ก่อนอื่น เนื้อหานี้ ต่อจากเนื้อหาตอนที่ 2
jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2
https://www.ninenik.com/content.php?arti_id=471 via @ninenik
https://www.ninenik.com/content.php?arti_id=471 via @ninenik
ส่งค่า options เพื่อเติมเข้าไปใน plugin
1 2 3 4 5 6 7 8 | <script type="text/javascript">$(function(){ // การเรียกใช้งาน plug in $(".i_h4").setbackground({ background:"green" // ส่งค่า options เพื่อเติมเข้าไปใน plugin });});</script> |
background คือค่าที่เรากำหนดเพื่มเข้าไป ใน options ของ plugin
ทำให้เราสามารถเลือก ที่จะไม่ใช้ ค่าเริ่มต้น ที่กำหนดไว้ก่อนใน plugin ได้
โดยที่ค่า background จะต้องเป็นตัวแปร หนึ่งที่ได้กำหนดหรือเรียกใช้ ใน 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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({ background:"green" // ส่งค่า options เพื่อเติมเข้าไปใน plugin });});</script></body></html> |
ต่อไปมาดู หากมีการส่งค่าหลายค่า จะกำหนดอย่างไร
โดยเราจะมีการเพิ่ม สีของ ข้อความเข้าไป
ให้มาแก้ไขที่ไฟล์ plugin ก่อน โดยพิ่มค่าเริ่มต้นดังนี้
1 2 3 4 5 6 7 8 | // ส่วนนี้ สำหรับกำหนดค่าเริ่มต้นvar defaults={ foreground:"red", // กำหนดสีข้อความ background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง}; |
จากค่าด้านบน เราจะได้ตัวแปร object
settings.foreground เป็นค่าสี ของข้อความ เป็นค่าเริ่มต้น สีแดง
และเปลี่ยนโค้ด ทำงานของ plugin เป็น
1 2 3 4 5 6 7 8 | /// คืนค่ากลับ การทำงานของ pluginreturn this.each(function() { $(this).css({ "background-color":settings.background, "color":settings.foreground }); // โค้ตสำหรับ การทำงานของ 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 | // JavaScript Document(function($){ // setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า setbackground $.fn.setbackground = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options // ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น var defaults={ foreground:"red", // กำหนดสีข้อความ background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง }; // ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด var settings = $.extend( {}, defaults, options ); /// คืนค่ากลับ การทำงานของ plugin return this.each(function() { $(this).css({ "background-color":settings.background, "color":settings.foreground }); // โค้ตสำหรับ การทำงานของ plugin }); };})(jQuery); |
เท่านี้เราก็สามารถเรียกใช้งาน และส่งค่า options ทั้งสองค่าได้ดังนี้
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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({ foreground:"#FFFFFF", // ส่งค่า options สีข้อความ background:"green" // ส่งค่า options เพื่อเติมเข้าไปใน plugin });});</script></body></html> |
ในตอนที่ 4 จะแนะนำวิธีการตรวจสอบค่า options ว่ามีการส่งค่า
เข้าไปใน plugin หรือไม่
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง