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