Question

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

正如我的jsfiddle示例所示，代码确实停止了。但是，您会在后台注意到选项卡确实更改为单击的选项卡，因此如果单击取消，背景将闪烁。我试图避免这种情况。

感谢。

//
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

我发现最好用结果来解决。在涉及.resove()代码时，似乎.done()会以更好的方式运作。

工作示例：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);时没有发生这种情况。

希望有所帮助。

单击选项卡上的Jquery-ui选项卡打开对话框（停止代码）

1 个答案: