Plugins trong jQuery Plug-in là một phần của code được viết theo một JavaScript file chuẩn.. Những file này cung cấp các phương thức jQuery hữu ích mà có thể được sử dụng cùng với các ph
Trang 1Plugins trong jQuery
Plug-in là một phần của code được viết theo một JavaScript file chuẩn Những file này cung
cấp các phương thức jQuery hữu ích mà có thể được sử dụng cùng với các phương thức
jQuery Library
Có rất nhiều jQuery plug-in có sẵn để bạn có thể tải về từ kho lưu
tại:http://jquery.com/plugins
Cách sử dụng Plugins trong jQuery
Để tạo các phương thức của một plugin có sẵn, chúng ta bao plugin file (tương tự như
jQuery Library file) vào trong phần tử <head> của tài liệu
Chúng tôi phải chắc chắn rằng nó xuất hiện sau jQuery file nguồn chính, và trước
JavaScript code mà chúng ta custom
Ví dụ sau chỉ cách để bao jquery.plug-in.js plugintrong Thư viện C:
<html> <head> <title> The jQuery Example </title> <script
type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
<script src = "jquery.plug-in.js" type = "text/javascript" ></script> <script
src = "custom.js" type = "text/javascript" ></script> <script
type = "text/javascript" language = "javascript" >
$ document ) ready ( function () your custom code
}); </script> </head> <body>
</body> </html>
Cách để phát triển một Plug-in trong jQuery
Đó là đơn giản để viết một plug-in cho riêng bạn Bạn theo cú pháp sau để tạo một phương
thức:
jQuery.fn.methodName = methodDefinition;
Ở đây, Phương thứcNameM là tên của phương thức mới và Phương thứcDefinition là định
nghĩa phương thức thực sự
jQuery team đề nghị một Guideline sau:
• Bất kỳ phương thức hoặc hàm nào bạn đính kèm phải có một dấu chấm phảy (;) ở
cuối cùng
Trang 2• Phương thức của bạn phải trả về đối tượng jQuery, trừ khi có ghi chú khác
• Bạn nên sử dụng this.each để lặp lại tập hợp các phần tử đã so khớp hiện tại Nó
làm cho code rõ ràng và tương thích
• Đặt trước filename với jquery, theo sau là tên của plugin và kết thúc với js
• Luôn luôn đính kèm plugin tới jQuery một cách trực tiếp thay vì sử dụng $, vì thế
người sử dụng có thể dùng một biệt hiệu custom thông qua phương thức
noConflict()
Ví dụ, nếu chúng ta viết một plugin mà chúng ta muốn đặt tên là debug, thì tên JavaScript
file cho plugin này là:
jquery.debug.js
Sự sử dụng của tiền tố jquery loại bỏ bất cứ sự xung đột về tên với file dự định để sử
dụng với thư viện khác
Ví dụ
Sau đây là một plug-in nhỏ để có phương thức warning() cho mục đích debug Bạn giữ
code này trong jquery.debug.js file:
jQuery fn warning = function () return this each ( function ()
alert ( 'Tag Name:"' $ ( this ) prop ( "tagName" ) + '".' ); }); };
Ví dụ sau minh họa cách sử dụng phương thức warning() Giả sử chúng ta
đặtjquery.debug.js trong cùng một thư mục với trang HTML
<html> <head> <title> The jQuery Example </title> <script
type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
<script src = "jquery.debug.js"
type = "text/javascript" ></script> <script type = "text/javascript"
language = "javascript" > $ ( document ) ready ( function ()
$ "div" ) warning (); $ ( "p" ) warning (); }); </script> </head> <body> <p> This is paragraph </p> <div> This is division </div> </body> </html>
Nó sẽ cảnh báo bạn như sau:
Tag Name:"DIV" Tag Name:"P"