Jquery-ui Tabs Open dialog on tab click (stop code)

Posted 2023-05-08

【中文标题】Jquery-ui Tabs Open dialog on tab click (stop code)

【英文标题】：Jquery-ui Tabs Open dialog box on tab click (stop code)

【发布时间】：2018-10-03 20:59:58

【问题描述】：

这是我的代码。我试图阻止单击的选项卡加载，直到我从对话框中得到响应。此外，如果我单击取消，我想返回到先前选择的选项卡。目前我设置它的方式会创建一个循环（我用我的蹩脚代码打破了它）。

从我的 jsfiddle 示例中可以看出，代码确实停止了。但是，您会在背景中注意到选项卡确实更改为单击的选项卡，因此如果单击取消，则背景将闪烁。我正在努力避免这种情况。

谢谢。

My Fiddle

//
var runOnceDammit;
$(document).ready(function() 
$(".hideT").button();
$("#tabs").tabs();
$("#tabs").tabs("disable", "#tabs-4");
$('.ms-formtable').appendTo($('#tabs-1'));
$("#tabs").on("tabsbeforeactivate", function(event, ui) 
if (runOnceDammit == true) 
    runOnceDammit = false;
    return;

var active = $("#tabs").tabs("option", "active");
var dialResults = $.when(showDialog());
dialResults.done(function(data) 
  if (data) 
    $('.ms-formtable').appendTo(ui.newPanel);
    if (ui.newPanel.is("#tabs-2")) 
      //do stuff
     else if (ui.newPanel.is("#tabs-3")) 
      //do stuff
     else if (ui.newPanel.is("#tabs-1")) 
      //do stuff
    
    return;
   else 
    ui.newTab.blur(); //trying to remove higlight from tab
    runOnceDammit = true
    $("#tabs").tabs(
      active: active
    ); //activate previous tab
    return;
  
);
//return;
);
); //End DocReady!
//
//
function showDialog() 
var dfd = $.Deferred();
var results;
$('#dialog').dialog(
dialogClass: "no-close",
title: "Fanciful Dialog Box",
modal: true,
draggable: false,
buttons: [
  text: 'Confirm',
  icons: 
    primary: "ui-icon-check"
  ,
  click: function() 
    results = true;
    $(this).dialog('close');
  
, 
  text: 'Cancel',
  icons: 
    primary: "ui-icon-cancel"
  ,
  click: function() 
    results = false;
    $(this).dialog('close');
  
],
close: function(event, ui) 
  dfd.resolve(results);

);
return dfd.promise()

【问题讨论】：

欢迎来到 Stack Overflow。选项卡使用超链接链接到锚点。防止这种情况的最好方法是创建一个click 回调，以防止超链接的默认功能。我会扩展我的答案。

【参考方案1】：

考虑以下几点：

<div class="section" id="section-1">
  <a href="#myTab-1">Tab 1</a>
</div>
<div class="section" id="section-2">
  <a name="myTab-1"></a>
</div>
<script>
$("#myTab-1").click(function(event)
  event.preventDefault();
  // Do a thing
  return true;
);
</script>

这个 jQuery 代码将一个匿名函数绑定到click 事件。该函数将 javascript 事件对象作为属性。事件对它们有一些方法，例如.preventDefault()。这允许您中断默认事件并执行您自己的代码。使用return true 将在您的代码运行后返回默认行为。

我回答了一个类似的问题：confirm form submit with jquery UI

我发现用结果来解决更好。当涉及到.done() 代码时，.resove() 似乎会以这种方式更好地工作。

工作示例：https://jsfiddle.net/Twisty/e2djqx08/

我认为关键是在取消代码中正确分配active 标签。

JavaScript

function showDialog() 
  var dfd = $.Deferred();
  var results;
  $('#dialog').dialog(
    dialogClass: "no-close",
    title: "Fanciful Dialog Box",
    modal: true,
    draggable: false,
    buttons: [
      text: 'Confirm',
      icons: 
        primary: "ui-icon-check"
      ,
      click: function() 
        $(this).dialog('close');
        dfd.resolve(true);
      
    , 
      text: 'Cancel',
      icons: 
        primary: "ui-icon-cancel"
      ,
      click: function() 
        $(this).dialog('close');
        dfd.resolve(false);
      
    ]
  );
  return dfd.promise();


$(function() 
  $("#tabs").tabs().tabs("disable", 3);
  $('.ms-formtable').appendTo($('#tabs-1'));
  $("#tabs").on("tabsbeforeactivate", function(e, ui) 
    e.preventDefault();
    console.log("EVENT: Prevent Default");
    var self = $(this);
    var revertToTab = ui.oldTab;
    var revertToPanel = ui.oldPanel;
    var sendTo = ui.newTab;
    var sendToPanel = ui.newPanel;
    console.log("EVENT: When Dialog is closed.");
    $.when(showDialog()).done(function(data) 
      if (data) 
        console.log("INFO: Dialog Confirmed.");
        $('.ms-formtable').appendTo(ui.newPanel);
        if (self.is("#tabs-2")) 
          //do stuff
         else if (self.is("#tabs-3")) 
          //do stuff
         else if (self.is("#tabs-1")) 
          //do stuff
        
        return;
       else 
        console.log("INFO: Dialog Cancelled");
        self.blur();
        $("#tabs").tabs("option", "active", revertToTab);
        return false;
      
    );
  );
);

在我的测试中，当对话框处于活动状态时，我继续发现活动选项卡面板正在加载。这在我使用$("#tabs").tabs("option", "active", revertToTab); 时没有发生。

希望对您有所帮助。

【讨论】：

谢谢，这很有帮助。我似乎无法工作的一件事是，如果我单击确认，它不会激活单击的选项卡。我什至尝试在 if(data) 之后添加 $("#tabs").tabs("option", "active", sendTo); 。谢谢。

@MicahCaffrey 应该只需要return true 在确认后让它进入活动标签。

我也是这样，但它不起作用。你能看看你的工作小提琴例子吗？因为在您的示例中，它对我不起作用。再次感谢。

@MicahCaffrey 我认为return 用于匿名done 函数，它没有将true 或false 传递回tabsbeforeactivation 事件回调。寻找.dispatchEvent() 或类似的方式。

@MicahCaffrey 还没有。