Question

我正在使用jQuery 1.9 +

我尝试弹出一个Jquery对话框模式，以允许用户在切换标签之前进行确认。我尝试了以下代码：

$('#tabs').tabs({
  beforeActivate: function(event, ui) {

  $('<div> Confirm Switching Tab </div>').dialog({
      modal: true,
      title: "Confirm Action",
      buttons: {
          Yes: function(){
              $(this).dialog('close');
              return true;
          },
          No: function(){
              $(this).dialog('close');
               return false;
          }
      }
  });

 }
})

上面的代码确实弹出了确认对话框，但它仍然打开选项卡，因为beforeActivate事件实际上在用户单击对话框按钮返回true / false之前返回。

然后我想出以下代码。

$('#tabs').tabs({
  beforeActivate: function(event, ui) {

   $('<div> Confirm Switching Tab </div>').dialog({
      modal: true,
      title: "Confirm Action",
      buttons: {
          Yes: function(){
              $(this).dialog('close');
              $( "#tabs" ).tabs( "option", "active", ui.newTab.index());
          },
          No: function(){
              $(this).dialog('close');

          }
      }
  });

  return false;
 }
})

上面的代码不会打开标签，因为我把＆＃34;返回false＆＃34;在beforeActivate选项的末尾。返回beforeActivate之后，弹出对话框，如果用户单击对话框上的Yes按钮，则会再次触发切换选项卡事件。但是，对话框将再次弹出。这是无穷无尽的。

我的问题是我如何修改上面的代码来做到这一点。或者有更好的方法吗？

提前致谢。

Answer 1

主要问题是，即使您以编程方式切换选项卡，也会触发beforeActivate

$( "#tabs" ).tabs( "option", "active", ui.newTab.index());

只要你一直按是就会导致无限循环 - 对话框永远不会关闭（新对话框会一直打开继续打开）。

我可以想到的一个可能的工作是使用静态对话框，并使用data()来保存布尔标志以指示事件是如何被触发的。

＆＃13;

$('#tabs').tabs({
  beforeActivate: function(event, ui) {
    if (!$("#dialog").data("confirmed")) { // If event is not triggered by user
      event.preventDefault(); // prevent switching tabs
      $("#dialog").dialog("open").data("ui", ui); // open the dialog and pass the info
    }
  },
  activate: function(event, ui) {
    $("#dialog").data("confirmed", false);
  }
});
$("#dialog").dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    Yes: function() {
      var ui = $(this).data("ui");
      // if user clicks yes, change the stored data to true to avoid re-opening dialog
      $(this).dialog('close').data("confirmed", true);
      $("#tabs").tabs("option", "active", ui.newTab.index());
    },
    No: function() {
      // if user clicks no, change the stored data so that dialog will be reopened
      $(this).dialog('close').data("confirmed", false);
    }
  }
});

＆＃13;

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>

    </li>
    <li><a href="#tabs-2">Proin dolor</a>

    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>

    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
      Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>

  </div>
</div>
<div id="dialog" title="Confirm Action">Confirm Switching Tab
  <div>

＆＃13;

Answer 2

一种选择是存储一个变量，用于确定用户是否回答了“是”＃34;。由于ui.newTab是一个jQuery对象，因此您可以将其存储在.data

中

$('#tabs').tabs({
  beforeActivate: function(event, ui) {
      if (ui.newTab.data("canOpen") == true) {
          ui.newTab.data("canOpen", false);
          return true;
      }

       $('<div> Confirm Switching Tab </div>').dialog({
          modal: true,
          title: "Confirm Action",
          buttons: {
              Yes: function(){
                  ui.newTab.data("canOpen", true);
                  $(this).dialog('close');
                  $( "#tabs" ).tabs( "option", "active", ui.newTab.index());
              },
              No: function(){
                  $(this).dialog('close');

              }
          }
      });

     return false;
 }
})

在这里小提琴：http://jsfiddle.net/ktc1uuca/

如何在切换选项卡之前使用创建Jquery Confirm Dialog

2 个答案: