Открытые диалоговые окна jQuery UI один за другим

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, либо метод уничтожения.

Спасибо за любой вклад.

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) иметь идентификатор для каждого диалога (вы можете добавить его в качестве атрибута 'id' на div)

2) прослушать событие 'close' в диалоге ( http://api.jqueryui.com/dialog/)

Таким образом, в обработчике 'close' вы можете проверить текущее состояние, и на основании этого открывать / закрывать другие диалоги.

Текущее состояние будет таким: какие диалоговые окна открыты в данный момент, и другие параметры, которые вы использовали для условия1, условия2 и т. Д.

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