Làm thế nào để xử lý toàn cầu trênClose sự kiện của fancybox?

Question

Tôi đang sử dụng Fancybox trong ứng dụng của mình. Bây giờ để xử lý các sự kiện gần chúng ta viết một cái gì đó như:

$(".fancybox").fancybox({onClose:function(){alert('blah');}} 

như đã thấy trên trang doc này:

http://fancyapps.com/fancybox/#docs

Tuy nhiên tôi muốn viết một cái gì đó chung và toàn cầu cho tất cả Fancybox mà được chạy mọi cho bất kỳ fancybox nào. Làm thế nào để làm điều đó? Trong ngắn hạn tôi không muốn viết mã của onClose trên mỗi fancybox và không muốn nó phụ thuộc vào lớp học, id (ví dụ: .fancybox trong trường hợp này). Làm thế nào để làm điều đó? Tôi đã cố gắng viết:

$.fancybox({onClose:function(){alert('blah');}} 

nhưng nó không hoạt động và từ tài liệu có vẻ như đây là chức năng mở progammatically.

Answer 1

Tôi không chắc đây có phải là giải pháp tốt nhất hay không nhưng tôi sẽ chọn một mẫu pub/sub để trong hộp thư ưa thích của bạn, bạn nên làm một cái gì đó như thế.

$(".fancybox").fancybox(
{ onClose:function(){ 
       $(window).trigger('fancyboxClosed'); 
      } 
}); 

Sau đó, ở đâu đó trong mã của bạn:

$(window).on('fancyboxClosed', function(){ 
    // Your global function for fancybox closed 
}); 

Tôi không biết rất nhiều về mục đích của bạn, nhưng có trong tâm trí bạn luôn có thể vượt qua một hàm có tên thay vì một người vô danh, do đó bạn luôn luôn kích hoạt cùng chức năng.

Ví dụ trên nên là cách để đi nếu bạn muốn thực hiện những điều khác nhau tùy thuộc vào từng hộp ưa thích.

Ngoài ra, bạn có thể đính kèm sự kiện vào bất kỳ đối tượng nào bạn muốn. Chỉ cần sử dụng cửa sổ để thuận tiện.

Sửa

Bạn cũng có thể chỉnh sửa mã nguồn Fancybox của bạn để làm điều đó (chỉnh sửa cho 1.3.4) chỉ cần thêm $(window).trigger('fancyboxClosed'); khoảng dòng 953.

Answer 2

Từ những gì tôi nhìn thấy, Fancybox không cung cấp bất kỳ API cho điều đó. Thay vào đó, bạn có thể sử dụng hack. Các hộp đèn được đóng lại khi:

1. nút đóng được nhấp (div với lớp 'Fancybox-gần')
2. nền đen được nhấp (div với lớp 'Fancybox-overlay')
3. nút thoát là được nhấn (e.which = 27)

Vì vậy, bạn có thể thêm trình xử lý nhấp chuột vào cơ thể để kiểm tra xem sự kiện có phải là mục tiêu .fancybox-close hoặc .fancybox-overlay. Ngoài ra, thêm một trình xử lý khóa xuống để ghi lại để nghe nếu phím thoát được nhấn.

Answer 3

Cố gắng sử dụng phương pháp

BeforeClose hoặc afterClose

việc

Mã này tốt

$(".fancybox").fancybox({beforeClose:function(){alert('blah');}} 

Answer 4

Đây là một giải pháp phù hợp cho 1.3.4

$(document).delegate('#fancybox-close,#fancybox-overlay','click',function(){ 
    FancyBoxClosed(); 
}); 
$(document).keyup(function(e){ 
    if(e.keyCode == 27){ 
     if($('#fancybox-overlay').css('display') != 'none') 
      FancyBoxClosed(); 
    } 
}); 

function FancyBoxClosed() 
{ 
    //global callback for fancybox closed 
} 

Đối với phiên bản khác không phải là 1.3.4, hãy kiểm tra bộ chọn yếu tố ưa thích cho lớp phủ và nút đóng bằng cách sử dụng con chuồn chuồn, đom đóm hoặc hình khác.