1. สร้างโฟลเดอร์ สำหรับเก็บไฟล์ jQuery plugin ที่เราจะสร้าง ที่นี้สร้างในโฟลเดอร์ js
2. สร้างไฟล์ javascript ในที่นี้กำหนด ชื่อ jquery.setbackground.js
โดยสามารถ คัดลอก รูปแบบ โครงสร้าง สำหรับการสร้าง jquery plugin มาใช้งาน
ตามโค้ดด้านล่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // JavaScript Document(function($){ // setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า setbackground $.fn.setbackground = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options // ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น var defaults={ }; // ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด var settings = $.extend( {}, defaults, options ); /// คืนค่ากลับ การทำงานของ plugin return this.each(function() { // โค้ตสำหรับ การทำงานของ plugin }); };})(jQuery); |
สำหรับการเรียกใช้งาน สามารถทำได้ดังนี้
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 | <!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();});</script></body></html> |
เนื้อหาอย่างย่อส่วนนี้ เป้นเพียงการเริ่มต้น ดูเนื้อหาตอนที่ 2 ต่อ
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง