如何在切换选项卡之前使用创建Jquery Confirm Dialog
我正在使用jQuery 1.9+
我试图弹出一个Jquery对话框模式，以允许用户在切换标签之前进行确认。 我试过以下代码：
$('#tabs').tabs({ beforeActivate: function(event, ui) { $(' Confirm Switching Tab ').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) { $(' Confirm Switching Tab ').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; } })
上面的代码不会打开选项卡，因为我在beforeActivate选项的末尾添加了“return false”。 返回beforeActivate之后，弹出对话框，如果用户单击对话框上的Yes按钮，则会再次触发切换选项卡事件。 但是，对话框将再次弹出。 这是无穷无尽的。
我的问题是我如何修改上面的代码来做到这一点。 或者有更好的方法吗？
提前致谢。
主要问题是，即使您以编程方式切换选项卡， 也会触发beforeActivate
$( "#tabs" ).tabs( "option", "active", ui.newTab.index());
只要你一直按下是 ，就会产生一个无限循环 – 对话框永远不会关闭（ 新的对话框会一个接一个地打开 ）。
我可以想到的一个可能的工作是使用静态对话框，并使用data（）来指示如何触发事件来保存布尔标志。
$('#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); } } });
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.
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.
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.
Confirm Switching Tab
一种选择是存储确定用户是否回答“是”的变量。 由于ui.newTab是一个jQuery对象，你可以将它存储在它的.data
$('#tabs').tabs({ beforeActivate: function(event, ui) { if (ui.newTab.data("canOpen") == true) { ui.newTab.data("canOpen", false); return true; } $(' Confirm Switching Tab ').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/