jQuery plugin ทำไง

jQuery
jQuery

หลายๆคนนั้นพอเริ่มใช้ jQuery ไปซักพักแล้วก็จะเจอว่าเราเขียนอะไรซ้ำๆซากๆ เขียนเหมือนเดิม มันน่าจะมีอะไรที่มากกว่าฟังก์ชั่นและสามารถใช้ความสามารถ changing method หรือการที่เราทำอย่างนี้ $().slideUp().css().attr() การใช้ .method ต่อๆกันอย่างนี้เราเรียกว่า changing method ซึ่งเป็นจุดเด่นของ jQuery วันนี้จะมาสอนเอารอไรอ่านต่อกันโลด

โดยปกติเราเวลาเราจะสร้าง plugin นั้นก็เขียนธรรมดาอย่างนี้

[php]
jQuery.fn.myPlugin = function() {

// โค้ดสำหรับให้ plugin ทำงาน

};
[/php]

อธิบายรูปแบบการเขียนซักหน่อยคือเราจะต้องเขียน jQuery.fn.ชื่อplugin อย่างนี้ทุกครั้งถ้าเราต้องการที่จะทำ plugin ที่สามารถใช้กับ element แล้ว .method

แต่ว่าไม่เห็นมีการใช้ $ เลยใช่ไหมผมรู้ว่าจะให้คุณมานั่งเขียน jQuery.method เรื่อยๆก็คงแย่ แต่ที่ต้องเขียนอย่างนี้เพราะต้องกันการ “ชนกัน” ของ library ตัวอื่น เขาก็ใช้กันเยอะตัว $ เนี้ยเพราะฉะนั้นเราจึงต้องปรับเปลี่ยนกันนิดหน่อย เพื่อไม่ให้ library ตัวอื่นมาทับเมื่อเราทำการเรียกด้วย $ ครับ โค้ดจึงเป็นแบบด้านล่างครับ

[php]
(function( $ ) {
$.fn.myPlugin = function() {

// โค้ดทำงานต่างๆใน plugin

};
})( jQuery );
[/php]

อ่า … คราวนี้เราสามารถเรียก ฟังก์ชั่นต่างๆในส่วนตรงที่ผมเขียน comment ไว้ใน plugin ของเราได้แล้วครับ ต่อมาก่อนที่เราจะลุยต่อกับ plugin ของเราต่อนั้นผมขออธิบายอีกนิดนั่นคือเรื่องเวลาที่เราใช้การอ้างอิง $(this) อันนี้ทุกคนที่เขียนมาซักพักแล้วน่าจะคุ้นเคยกันดี แต่ว่าถ้้าคุณต้องการอ้างอิงตัว element selector ตัวนั้นๆที่กำลังเรียกใช้ plugin เราอยู่เราจะเรียกใช้ด้วยการใช้ this เอาไปดูตัวอย่างกันเลย

[php]
(function( $ ){

$.fn.myPlugin = function() {

// ในช่วงตรงนี้ให้เรีียกอ้างอิงโดยการใช้ this
// ถ้าเราใช้ $(this) มันเหมือนกับการที่เราเขียนแบบนี้ >>> $($(‘#element’));

this.fadeIn(‘normal’, function(){

// แต่ถ้าอยู่ในฟังก์ชั่นของ jQuery แล้วคุณสามารถอ้างอิง $(this) ได้ครับในนี้

});

};
})( jQuery );</pre>
[/php]

อ่ะฮะ !! คราวเริ่มเข้าใจบ้างแล้วใช่ไหมครับว่าทำไมเขาต้องเขียนกันอย่างนี้ ยังมีอีกอย่าเพิ่งรีบไปไหน ใจเย็นๆ เวลาเราเรียกใช้ก็เรียกแบบนี้

[php]
$(‘#element’).myPlugin();
[/php]

ซึ่งเวลาที่เราอ้างอิงถึง $(‘#element’) ใน Plugin ก็ใช้ this แทน $(this) ถ้าเรียกใช้ฟังก์ชั่นของ jQuery ก็เหมือนเดิมเลยจ้า $(this) เอาล่ะมาลองสร้างตัวอย่าง plugin ง่ายๆกันก่อนแล้วกันดังตัวอย่างเลย

[php]

(function($) {

$.fn.myPlugin = function() {

this.fadeOut("slow");

}

})( jQuery );

// แล้วลองเรียก plugin ของเราดู

$(‘#element’).myPlugin();

[/php]

เราก็จะเห็นว่า element ที่ถูก select ไว้ fadeOut ออกไป ต่อไปเราจะพูดถึงจุดเ่ด่นการ changing method ของ jQuery ที่ทำให้มันโด่งดังเป็นที่น่าใช้ โดยการเขียนเนี้ยคุณจำเป็นจะต้อง return this กลับมาเพื่อจะส่ง element selector ที่เราใช้ใน plugin ส่งต่อไปให้ method อื่นใช้ ตัวอย่าง

[php]
(function( $ ){

$.fn.myPlugin = function( type ) {

return this.each(function() {

 $(this).fadeOut("slow").fadeIn("slow");

});

};
})( jQuery );

// ลอง changing method กันดู
$(‘#element’).myPlugin().css(‘backgroundColor’,’black’);
[/php]

เราก็จะเห็นว่าเราสามารถใช้ changing method ของ jQuery ได้แหละ :D อ่า … วันนี้คงต้องพอแค่นี้ก่อนพรุ่งนี้มาภาค 2 นะจ๊ะแล้วจะมาเล่าต่อว่ามันทำอะไรได้อีกเยอะ ฮ่าๆ วันนี้ง่วงนอนแล้ว รอติดตามพรุ่งนี้น้า

ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ

Loading

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Message us

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ปฎิเสธทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้ที่จำเป็น

    คุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

บันทึก