我使用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事件之前，用户单击对话框按钮，返回真/假。
于是我拿出了以下代码。
$('#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;
}
})
因为我把“返回false”在beforeActivate选择结束上面的代码不会打开的选项卡。 返回beforeActivate后，对话框弹出，如果用户点击对话框中的Yes按钮，然后它会再次触发切换标签事件。 然而，对话框将再次弹出。 这是一种无止境的。
我的问题是，我怎么能修改上面的代码来做到这一点。 或者，有没有更好的办法做到这一点？
提前致谢。
主要的问题是， beforeActivate甚至当你切换标签编程一样触发
$( "#tabs" ).tabs( "option", "active", ui.newTab.index());
引起无限循环，只要你保持按压是 -对话框将永远不会关闭（ 新对话框将打开继续陆续开通 ）。
一种可能的解决办法我能想到的是有一个静态的对话框，并保存使用使用布尔标志数据（） ，表示该事件是如何引发的。
$('#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); } } });
<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>
一种选择是存储确定用户是否回答“是”的变量。 由于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/
