jQuery - Plugin

Trình cắm là đoạn mã được viết trong tệp JavaScript tiêu chuẩn. Các tệp này cung cấp các phương thức jQuery hữu ích có thể được sử dụng cùng với các phương thức thư viện jQuery.

Có rất nhiều trình cắm jQuery có sẵn mà bạn có thể tải xuống từ liên kết kho lưu trữ tại https://jquery.com/plugins.

Cách sử dụng Plugin

Để cung cấp các phương thức của trình cắm thêm cho chúng tôi, chúng tôi bao gồm tệp trình cắm rất giống với tệp thư viện jQuery trong <head> của tài liệu.

Chúng tôi phải đảm bảo rằng nó xuất hiện sau tệp nguồn jQuery chính và trước mã JavaScript tùy chỉnh của chúng tôi.

Ví dụ sau cho thấy cách bao gồm jquery.plug-in.js plugin -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://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 Trình cắm

Điều này rất đơn giản để viết trình cắm của riêng bạn. Sau đây là cú pháp để tạo phương thức aa:

jQuery.fn.methodName = methodDefinition;

Ở đây methodNameM là tên của phương thức mới và methodDefinition là định nghĩa phương thức thực tế.

Hướng dẫn do nhóm jQuery đề xuất như sau:

Bất kỳ phương thức hoặc hàm nào bạn đính kèm phải có dấu chấm phẩy (;) ở cuối.
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ử phù hợp hiện tại - nó tạo ra mã sạch và tương thích theo cách đó.
Đặt tiền tố tên tệp bằng jquery, theo sau đó là tên của plugin và kết thúc bằng .js.
Luôn đính kèm trực tiếp plugin vào jQuery thay vì $, vì vậy người dùng có thể sử dụng bí danh tùy chỉnh thông qua phương thức noConflict ().

Ví dụ: nếu chúng tôi viết một plugin mà chúng tôi muốn đặt tên là gỡ lỗi , thì tên tệp JavaScript của chúng tôi cho plugin này là -

jquery.debug.js

Việc sử dụng jquery. tiền tố loại bỏ mọi xung đột tên có thể xảy ra với các tệp được sử dụng với các thư viện khác.

Thí dụ

Sau đây là một trình cắm nhỏ có phương pháp cảnh báo cho mục đích gỡ lỗi. Giữ mã này trong tệp jquery.debug.js -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

Đây là ví dụ hiển thị cách sử dụng phương thức warning (). Giả sử chúng ta đặt tệp jquery.debug.js trong cùng một thư mục của trang html.

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://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>

Điều này sẽ cảnh báo bạn với kết quả sau:

This is paragraph
This is division