ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3
เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdeejquery plugin jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery plugin jquery
ไปที่
Copy
จะได้รูปแบบ plugin ใหม่ ดังนี้
เท่านี้เราก็สามารถเรียกใช้งาน และส่งค่า options ทั้งสองค่าได้ดังนี้
การส่ง options เข้าไปใน jquery plugin นั้น สามารถได้ไม่ยาก
ก่อนอื่น เนื้อหานี้ ต่อจากเนื้อหาตอนที่ 2
jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2
http://www.ninenik.com/content.php?arti_id=471 via @ninenik
http://www.ninenik.com/content.php?arti_id=471 via @ninenik
ส่งค่า options เพื่อเติมเข้าไปใน plugin
<script type="text/javascript"> $(function(){ // การเรียกใช้งาน plug in $(".i_h4").setbackground({ background:"green" // ส่งค่า options เพื่อเติมเข้าไปใน plugin }); }); </script>
background คือค่าที่เรากำหนดเพื่มเข้าไป ใน options ของ plugin
ทำให้เราสามารถเลือก ที่จะไม่ใช้ ค่าเริ่มต้น ที่กำหนดไว้ก่อนใน plugin ได้
โดยที่ค่า background จะต้องเป็นตัวแปร หนึ่งที่ได้กำหนดหรือเรียกใช้ ใน plugin แล้วเท่านั้น
จึงจะสามารถใช้งานได้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 ก่อน โดยพิ่มค่าเริ่มต้นดังนี้
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น var defaults={ foreground:"red", // กำหนดสีข้อความ background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง };
จากค่าด้านบน เราจะได้ตัวแปร object
settings.foreground เป็นค่าสี ของข้อความ เป็นค่าเริ่มต้น สีแดง
และเปลี่ยนโค้ด ทำงานของ plugin เป็น
/// คืนค่ากลับ การทำงานของ plugin return this.each(function() { $(this).css({ "background-color":settings.background, "color":settings.foreground }); // โค้ตสำหรับ การทำงานของ plugin });
จะได้รูปแบบ plugin ใหม่ ดังนี้
// 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 ทั้งสองค่าได้ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 หรือไม่
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

อ่านต่อที่บทความ
-
01 Mar2014ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4 อ่าน 4,509
ยิ่ง plugin มีการทำงาน หรือการกำหนดค่ามากขึ้น ตัวแปร และการส่งค่า ก็จะมีจ
เนื้อหาที่เกี่ยวข้อง
-
26 Feb2014เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1 อ่าน 8,524
1. สร้างโฟลเดอร์ สำหรับเก็บไฟล์ jQuery plugin ที่เราจะสร้าง ที่นี้สร้างในโฟลเ
-
27 Feb2014jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2 อ่าน 9,566
ตอนที่ 2 เป็นการทำความเข้าใจ การทำงาน ของสวนต่างๆ อย่างง่าย เพื่อให้พอได้
-
กำลังอ่านเนื้อหานี้อยู่28 Feb2014ส่งค่า options เพิ่มเติม เข้าไปใน jquery plugin ตอนที่ 3 อ่าน 5,999
การส่ง options เข้าไปใน jquery plugin นั้น สามารถได้ไม่ยาก ก่อ
-
01 Mar2014ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4 อ่าน 4,509
ยิ่ง plugin มีการทำงาน หรือการกำหนดค่ามากขึ้น ตัวแปร และการส่งค่า ก็จะมีจ
-
02 Mar2014การส่งค่า เรียกใช้งาน ฟังก์ชั่น ใน jquery plugin ตอนที่ 5 อ่าน 6,520
การเพิ่มชุดคำสั่ง ฟังก์ชั่นใน plugin สามารถเรียกใช้งาน options ที่เป็น ฟั
Tags::
jquery
jquery plugin
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()