7

アプリケーションで Fancybox を使用しています。close イベントを処理するために、次のように記述します。

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

このドキュメントページに見られるように：

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

ただし、ファンシーボックスのいずれかに対して毎回実行される、すべてのファンシーボックスに共通でグローバルなものを書きたいと思います。それ、どうやったら出来るの？要するに、各ファンシーボックスに onClose のコードを書きたくないし、それを class,id に依存させたくありません (例:.fancyboxこの場合)。それ、どうやったら出来るの？私は書いてみました：

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

しかし、それは機能せず、ドキュメントから、これはプログラム的に開くための機能であるように見えます。

4

4 に答える 4

5

これが最善の解決策かどうかはわかりませんが、pub / subパターンを選択するので、ファンシーボックスでそのようなことを行う必要があります。

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

次に、コードのどこかで：

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

私はあなたの目的についてはよくわかりませんが、匿名関数の代わりに名前付き関数をいつでも渡すことができるので、常に同じ関数をトリガーできることを覚えておいてください。

上記の例は、各ファンシーボックスに応じて異なるものを作成したい場合の方法です。

また、イベントを任意のオブジェクトに添付できます。便利なウィンドウを使用しました。

編集

$(window).trigger('fancyboxClosed');fancyboxソースを編集して、953行目あたりに追加することもできます（1.3.4用に編集） 。

于 2012-05-24T08:05:56.917 に答える
5

メソッドを使ってみる

beforeClose または afterClose

このコードは正常に動作します

$(".fancybox").fancybox({beforeClose:function(){alert('blah');}}
于 2012-08-12T07:50:35.877 に答える
2

私が見たところ、Fancybox はそのための API を提供していません。代わりにハックを使用できます。次の場合、ライトボックスは閉じられます。

  1. 閉じるボタンがクリックされた (クラス「fancybox-close」の div)
  2. 黒い背景がクリックされた (クラス「fancybox-overlay」の div)
  3. エスケープボタンが押された (e.which = 27)

したがって、クリック ハンドラーを body に追加して、event.target が .fancybox-close または .fancybox-overlay であるかどうかを確認できます。また、ドキュメントに keydown ハンドラを追加して、エスケープ キーが押された場合にリッスンします。

于 2012-05-24T08:07:25.000 に答える
0

これは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
}

1.3.4 以外のバージョンの場合は、トンボ、ホタルなどを使用してオーバーレイと閉じるボタンのファンシーボックス要素セレクターを再確認してください。

于 2013-08-06T06:45:02.467 に答える