如何在对话框显示中将回调附加到 jquery 效果?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6923647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:34:11  来源:igfitidea点击:

How to attach callback to jquery effect on dialog show?

jqueryjquery-uidialogcallbackeffects

提问by Pehmolelu

My problem is that I do not know how to attach callback to the jquery ui dialog show.

我的问题是我不知道如何将回调附加到 jquery ui 对话框显示。

The show is actually an option:

节目其实是一个选择:

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

I want to have a callback after the slide animation is complete. I looked from the effects itself and they have a callback:

我想在幻灯片动画完成后进行回调。我从效果本身看,他们有一个回调:

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

But in the dialog the effect is set up very differently. I tried also putting:

但是在对话框中,效果的设置非常不同。我也试过放:

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

But it didn't work.

但它没有用。

Suggestions?

建议?

回答by andyb

Update 2015-07-27For anyone using jQuery v1.10.0 or above please see this other answeras my solution will not work with newer versions of jQuery.

更新 2015-07-27对于使用 jQuery v1.10.0 或更高版本的任何人,请参阅其他答案,因为我的解决方案不适用于较新版本的 jQuery。



Original answer

原答案

Already answered but since I had an answer, I'm going to post it anyway…

已经回答了,但既然我有了答案,我还是要发布它……

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

Shows openfollowed by animation completein the Console

控制台中显示open后跟animation complete

回答by losnir

Two years later, the suggested solution (by @andyb) is no longer working in current versions of jQuery UI (specifically since v1.10.0). His solution relied on the completecallback method - an undocumented feature .

两年后,建议的解决方案(由@andyb 提供)不再适用于当前版本的 jQuery UI(特别是自 v1.10.0 以来)。他的解决方案依赖于complete回调方法 - 一个未公开的功能。

I've came up with an up-to-date solution, using jQuery Promiseobject:

我想出了一个最新的解决方案,使用 jQueryPromise对象:

$("#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");
        });
    }
});

Here is the usual JSFiddle Demo: http://jsfiddle.net/losnir/jcmpm/

这是通常的 JSFiddle 演示:http: //jsfiddle.net/losnir/jcmpm/

回答by Pehmolelu

I downloaded the jquery ui dev bundle and found out that the callback is set with "complete":

我下载了 jquery ui dev 包,发现回调设置为“完成”:

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

Thanks for everyone trying to help solve this :)

感谢大家试图帮助解决这个问题:)

回答by Igor Dymov

Try to use openevent of dialog:

尝试使用open对话框事件:

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

回答by Chris Prince

I found it necessary to use the "focus:" event. I was losing the correctly selected button because of the show:. Lovely interactions.

我发现有必要使用“focus:”事件。由于显示:我丢失了正确选择的按钮。可爱的互动。

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