Откройте диалоговые окна JQuery UI One After Another

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 объекта, но я не уверен, как реализовать цепочки от основного исполнения части (где проверяются условия и вызываются функции).

Я также хотел бы убедиться, что он соединяется с следующим диалоговым окном независимо от того, как диалог перед его закрытием; либо по методу «закрыть», либо по методу «уничтожить».

Благодарим вас за вход.

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

Есть 2 вещи, которые вы можете использовать, чтобы осуществить это:

1) иметь идентификатор для каждого диалога (вы можете добавить его в качестве «идентификатор» атрибут на DIV)

2) слушать «закрыть» в диалоговом окне (http://api.jqueryui.com/dialog/)

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

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

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