Question

我有多个jQuery UI对话框，我想一个接一个地显示（一个关闭，下一个打开）。目前，他们都显示模态，但其中一个更大，在我看来看起来很糟糕/混乱。

我通常会在下一个对话框中打开一个对话框的关闭功能，但这些对话框是从单独的函数调用的，并且它们在某种意义上是动态的，并非所有这些对话框都始终根据某些标准显示。

我正在考虑使用$.Deferred的一种方法，但我不确定这是否会起作用，因为我的理解是它对AJAX调用这样的事情更有效。

这是一个（非常）简化的示例，说明如何按原样构建代码。

<script>
function displayAlert1(){
    $('<div/>', {text: 'Alert 1!'}).dialog({
        modal: true,
        autoOpen: true,
        width: 400,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
function displayAlert2(){
    $('<div />', {text: 'Alert 2!'}).dialog({
        modal: true,
        autoOpen: true,
        width: 200,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}

$(function(){
    // These are actually met from data passed by AJAX
    var condition1 = true;
    var condition2 = true;
    $('a').live('click', function(event, ui){
        if(condition1) displayAlert1();
        if(condition2) displayAlert2();
    }
});
</script>

<!-- The links are actually dynamically produced from AJAX, thus the live() event handler -->
<a>Click Me!</a>

jsFiddle

我的想法也许我可以让每个警报函数返回对象元素或$.Deferred对象的引用，但我不确定如何从主执行部分实现链接（条件是检查并调用函数。）

我还想确保它链接到下一个对话框，无论它关闭之前的对话如何;无论是通过X，通过'close'方法，还是'destroy'方法。

感谢您的任何意见。

Answer 1

在考虑了这种情况之后，我想出了使用堆叠队列的简化方法。我想我可以使用$.Deferred对象，但它会有点复杂，最终它本身就是一个堆栈。

以下是我的代码。我基本上初始化了一个数组用作我的堆栈，我将让每个函数将对话框元素推入堆栈。我绑定到所有未来对话框的关闭事件，并让它打开队列中的下一个。

有一些明显的优化要做，但这是我想要的正常工作。

function displayAlert1(){
    return $('<div/>', {'class': 'alerts', text: 'Alert 1!'}).dialog({
        modal: true,
        autoOpen: false,
        width: 400,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
function displayAlert2(){
    return $('<div/>', {'class': 'alerts', text: 'Alert 2!'}).dialog({
        modal: true,
        autoOpen: false,
        width: 200,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}

$(function(){
    // These are actually met from data passed by AJAX
    condition1 = true;
    condition2 = true;

    // Dialog stack
    dialogs = [];

    $('a').live('click', function(event, ui){
        if(condition1) dialogs.push(displayAlert1());
        if(condition2) dialogs.push(displayAlert2());

        // Grab the next dialog in queue
        d = dialogs.shift();
        // Check if it is valid, and open it
        if(d && d.dialog){
            d.dialog('open');
        }
    });

    $('.alerts').live('dialogclose', function(event, ui){
        // Grab the next dialog in queue
        d = dialogs.shift();
        // Check if it is valid, and open it
        if(d && d.dialog){
            d.dialog('open');
        }
        // Return false, or the close button (X) will glitch and re-create dialogs
        return false;
    });
});

jsFiddle

Answer 2

您可以使用两件事来实现此目的：

1）每个对话框都有一个标识符（你可以在div上添加它作为'id'属性）

2）在对话框（http://api.jqueryui.com/dialog/）

上听“关闭”事件

因此，在'close'处理程序中，您可以检查当前状态，并基于打开/关闭其他对话框。

当前状态将是：当前打开哪些对话框，以及您用于condition1，condition2等的其他参数。

http://jsbin.com/iwovob/1/

一个接一个地打开jQuery UI对话框

2 个答案: