Вкладки и диалоговые окна пользовательского интерфейса jQuery. Как подтвердить переключение вкладок с подтверждением на основе плагина диалогового окна?

Итак, цель состоит в том, чтобы подтвердить переключение на другую вкладку пользовательского интерфейса с помощью плагина UI Dialog. Использовать общий метод подтверждения просто:

jQuery("#tabsContainer").tabs({
    select: function(event, ui) {
        return confirm("Some confirmation message...");
    }
});

но как добиться такого же поведения с помощью диалогового окна?

Я думаю, что я должен позвонить:

jQuery("#tabsContainer").tabs("select", ui.index);

на «обратный вызов ок», но это не работает, как я ожидал. Кроме того, нет никаких сообщений об ошибках...

jQuery("#tabsContainer").tabs({
    select: function(event, ui) {
        jQuery("#dialogContainer").dialog({
            buttons: {
                'Ok': function() {
                    jQuery("#tabsContainer").tabs("select", ui.index);
                },
                Cancel: function() { return; }
            }
        });
        return false;
    }
});

user-interface dialog jquery tabs confirm
person drep    schedule 13.04.2010    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Источник вашей проблемы в том, что window.confirm блокируется, а диалоговое окно пользовательского интерфейса jQuery - нет. Вы можете обойти это, по-другому структурировав свой код. Вот один из многих возможных подходов:

$(function() {
    jQuery('#tabsContainer').tabs({
        select: function(event, ui) {
            // only allow a new tab to be selected if the
            // confirmation dialog is currently open.  if it's
            // not currently open, cancel the switch and show
            // the confirmation dialog.
            if (!jQuery('#dialogContainer').dialog('isOpen')) {
                $('#dialogContainer')
                    .data('tabId', ui.index)
                    .dialog('open');
                return false;
            }
        }
    });

    jQuery('#dialogContainer').dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                 // a new tab must be selected before
                 // the confirmation dialog is closed
                 var tabId = $(this).data('tabId');
                 $('#tabsContainer').tabs('select', tabId);
                 $(this).dialog('close');
             },
             'Cancel': function() {
                 $(this).dialog('close');
             }
        }
    });
});
person Ken Browning    schedule 13.04.2010
comment
Я не думаю, что отсутствие блокировки в диалоговом окне пользовательского интерфейса вызывает проблему, возможно, это связано с порядком вызовов? Неважно, ваш код работает как шарм, так что большое спасибо :) - person drep; 13.04.2010