一千萬個為什麽

搜索

jQuery UI選項卡和對話框 - 如何基於Dialog插件確認切換選項卡?

因此,目標是使用UI Dialog插件確認切換到另一個UI選項卡。 使用通用確認方法很簡單:

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

但如何使用Dialog模式框實現相同的行為?

我想我必須打電話:

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;
    }
});

最佳答案

您的問題的根源是 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');
             }
        }
    });
});

轉載註明原文: jQuery UI選項卡和對話框 - 如何基於Dialog插件確認切換選項卡?