Question

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

该节目实际上是一个选项：

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

我希望在幻灯片动画完成后进行回调。我从效果本身看，他们有一个回调：

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

但是在对话框中，效果的设置方式却截然不同。我也尝试过：

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

但它不起作用。

建议？

Answer 1

更新2015-07-27 对于使用jQuery 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');
    }
});

在控制台中显示open后跟animation complete

Answer 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/

Answer 3

我下载了jquery ui dev bundle并发现回调设置为“complete”：

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

感谢所有人试图帮助解决这个问题：）

Answer 4

尝试使用open对话事件：

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

Answer 5

我发现有必要使用＆＃34;焦点：＆＃34;事件。由于节目的原因，我正在丢失正确选择的按钮：可爱的互动。

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

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

5 个答案: