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

Question

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

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

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