jQuery UI 选项卡和对话框 - 如何根据对话框插件确认切换选项卡？

Question

因此，目标是使用 UI Dialog 插件确认切换到另一个 UI 选项卡。 使用常用的确认方法很简单：

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

但是如何使用对话框模式框来实现相同的行为？

我想我必须打电话：

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

在“ok 回调”上，但这并不像我预期的那样工作。另外 - 没有报告错误...

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

Answer 1

问题的根源是window.confirm 被阻塞，而 jQuery UI 的对话框没有。您可以通过以不同方式构建代码来解决此问题。这是许多可能的方法之一：

$(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');
             }
        }
    });
});