jquery plugin เปลี่ยนสีพื้นหลัง สร้าง plugin ตอนที่ 2
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeejquery plugin jquery
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery plugin jquery
ไปที่
Copy
ตอนที่ 2 เป็นการทำความเข้าใจ การทำงาน ของสวนต่างๆ อย่างง่าย
เพื่อให้พอได้เห็นรูปแบบ
ต่อจากเนื้อหา ตอนแรก
เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1
http://www.ninenik.com/content.php?arti_id=470 via @ninenik
โดยในตอนนี้ เราจะไม่มีการส่งค่าเพิ่มเติม เข้าไปใน plugin
แต่จะมีการกำหนด ค่าเริ่มต้น เพื่อศึกษา การเรียกใช้งาน
เงื่อนไขง่ายๆ คือ ให้ plugin นี้ทำการเปลี่ยนสีพื้นหลัง เป็นสีเหลือง
เมื่อมีการเรียกใช้งาน
เราจะกำหนดค่าไปในส่วนนี้
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น var defaults={ background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง };
ดังนั้น ส่วน สำหรับเป็นตัวแปร object ที่มีการกำหนด ค่าเริ่มต้น
// ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด var settings = $.extend( {}, defaults, options );
หรือที่เราสามารถเขียนในรูปแบบนี้ก็ได้
var settings = $.extend( {}, { background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง }, options );
ก็จะทำให้เราได้ ค่าตัวแปร object ชื่อ
settings.background มีค่าเป็น yellow ตามที่กำหนด
ต่อจากนี้ เมื่อเราได้ค่า ตัวแปร ค่าสีพื้นหลังแล้ว เราจะเอาไปใช้งาน
โค้ตสำหรับ การทำงานของ plugin ของเราคือ แค่เปลี่ยนสีพื้นหลัง
ด้วย ฟังก์ชั่น css ของ jQuery
$(this).css("background-color",settings.background);
เท่านี้ plugin อย่างง่าย เมื่อมีการเรียกใช้งาน
// JavaScript Document (function($){ // setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า setbackground $.fn.setbackground = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options // ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น var defaults={ background:"yellow" // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง }; // ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด var settings = $.extend( {}, defaults, options ); /// คืนค่ากลับ การทำงานของ plugin return this.each(function() { $(this).css("background-color",settings.background); // โค้ตสำหรับ การทำงานของ plugin }); }; })(jQuery);
ก็จะทำให้ พื้นหลัง ของ object ที่เรียกใช้งานมีพื้นหลังเป็นสีเหลือง
<!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(); }); </script> </body> </html>
เนื้อหาในตอนที่ 3 จะแสดงถึง วิธีการส่งค่า options เพื่อให้
plugin ของเราใช้งาน
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

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