web-dev-qa-db-ja.com

ダイアログショーのjqueryエフェクトにコールバックをアタッチする方法は？

私の問題は、jquery uiダイアログショーにコールバックをアタッチする方法がわからないことです。

ショーは実際にはオプションです：

$( ".selector" ).dialog({ show: 'slide' });

スライドアニメーションの完了後にコールバックを取得したいのですが。私はエフェクト自体から見て、コールバックがあります：

effect( effect, [options], [speed], [callback] )

ただし、ダイアログでは、効果の設定が大きく異なります。私も入れてみました：

$( ".selector" ).dialog({ show: 'slide', callback: function() {} });

しかし、それはうまくいきませんでした。

提案？

jqueryjquery-uidialogcallbackeffects
25
Pehmolelu

Update 2015-07-27jQuery v1.10.0以降を使用している人は、 this other answer を参照してください私の解決策はjQueryの新しいバージョンで作業します。

元の答え

回答済みですが、回答があったのでとにかく投稿します…

$('#dialog').dialog({
    show: {
        effect: 'slide',
        complete: function() {
            console.log('animation complete');
        }
    },
    open: function(event, ui) {
        console.log('open');
    }
});

Consoleにopenの後にanimation completeが表示されます

39
andyb

2年後、（@ andybによって）提案されたソリューションは、jQuery UIの現在のバージョン（特にv1.10.0以降）では動作しなくなりました。彼の解決策はcompleteコールバックメソッド-ドキュメント化されていない機能に依存していました。

JQuery Promise オブジェクトを使用して、最新のソリューションを思いつきました：

$("#dialog").dialog({
    show: {
        effect: "drop",
        direction: "up",
        duration: 1000
    },
    hide: {
        effect: "drop",
        direction: "down",
        duration: 1000
    },
    open: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Opened");
        });
    },
    close: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Closed");
        });
    }
});

これが通常のJSFiddleデモです： http://jsfiddle.net/losnir/jcmpm/

33
losnir

Jquery ui devバンドルをダウンロードし、コールバックが「complete」で設定されていることを確認しました。

$( ".selector" ).dialog({ show: 'slide', complete: function() {} });

これを解決しようとするすべての人に感謝します:)

3
Pehmolelu

ダイアログのopenイベントを使用してみてください：

$( ".selector" ).dialog({
   open: function(event, ui) { ... }
});
1
Igor Dymov

「focus：」イベントを使用する必要があることがわかりました。 show：のため、正しく選択されたボタンを失っていました。素敵な相互作用。

focus: function( event, ui ) {
    $(this).siblings('.ui-dialog-buttonpane').find("button:contains('Upload')").focus();
},
0
Chris Prince