thêm sự kiện vào Jquery Plugin

Question

Tôi có một plugin JQuery và tôi muốn thêm một số sự kiện vào plugin đó. Bất kỳ trợ giúp, mẹo hoặc hướng dẫn nào?

Answer 1

Khi tôi hiểu chính xác Nếu bạn có một số loại nút đóng cửa sổ bật lên và bạn cần một chức năng được kích hoạt sau khi đóng.

(function($) { 
    $.fn.somePlugin = function(options) { 
    // do some stuff with popup 
    $('#closeButton').click(function(e) { 
     //close popup 
     if (options.onAfterClose !== undefined) { 
     options.onAfterClose(e); 
     } 
    }); 
    }; 
})(jQuery); 

nó chỉ chuyển sự kiện từ sự kiện nhấp chuột.

$('#someId').somePlugin({ 
    onAfterClose: function(e) { 
     alert('after close'); 
    } 
}); 

Answer 2

jQuery docs has everything about triggering an event

Bất kỳ yếu tố đó đã được gắn liền với một sự kiện sử dụng $.bind() sẽ được thông báo rằng sự kiện này đã được kích hoạt và thực thi mã của nó.

Ví dụ:

$(document).trigger('my.event'); 

jQuery hỗ trợ 'namespaced' sự kiện, vì vậy bạn có thể đặt tên cho một cái gì đó sự kiện như mypluginName.eventName để đảm bảo không plugin nào gây trở ngại cho bạn sự kiện;)

đơn giản và sạch sẽ, mặc dù hãy cẩn thận, tài liệu tuyên bố rằng:

Mặc dù .trigger() mô phỏng sự kiện kích hoạt, hoàn thành với đối tượng sự kiện tổng hợp, nó không sao chép hoàn toàn một sự kiện tự nhiên xảy ra .

Nice ngày

Answer 3

Trong plugin jquery của bạn, điều đầu tiên bạn sẽ phải làm là kích hoạt sự kiện tùy chỉnh của bạn ở đâu đó trong mã plugin của bạn:

$ ("# someElement"). trigger ("someSpecialEvent");

Bạn cũng có thể chuyển dữ liệu bên trong chức năng trình kích hoạt nếu muốn.

$("#someElement").trigger("someSpecialEvent", "this does not need to be a string"); 

Tiếp theo, tạo một event handler ở một nơi khác trong mã plugin của bạn cho sự kiện tùy chỉnh của bạn:

$("#someElement").bind("someSpecialEvent", function(event, data) { 
    //If you had passed anything in your trigger function, you can grab it using the second parameter in the callback function. 
}); 

Sau đó, bạn có thể cho phép một người sử dụng thông qua một hàm callback như một tùy chọn như thế này:

$("#sampleElement").myPlugin({ 
    someEvent: function() { 
     //user logic 
    } 
}); 

Cuối cùng, bên trong mã plugin của bạn, bạn có thể gọi chức năng của người dùng theo một vài cách khác nhau. Ví dụ:

$.fn.samplePlugin = function(options) { 
     options = $.extend({}, $.fn.samplePlugin.options, options); 
     $("sampleElement").bind("specialEvent", function() { 
      options.someEvent.call(); 
     }); 
}