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

Question

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

从我的 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()
}

Answer 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); 时没有发生。

希望对您有所帮助。