jQuery UI Tabs und Dialog - Wie zur Bestätigung Registerkarten mit bestätigt basierend auf der Dialog-Plugin zu wechseln?
-
26-09-2019 - |
Frage
So ist es das Ziel zu bestätigen Umschalten auf eine andere UI Reiter UI-Dialog-Plugin. Mit gemeinsamer confirm Methode ist einfach:
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
return confirm("Some confirmation message...");
}
});
aber wie man gleiches Verhalten mit Dialog modal Box zu erreichen?
Ich glaube, ich habe zu nennen:
jQuery("#tabsContainer").tabs("select", ui.index);
auf „OK Rückruf“, aber diese nicht funktioniert, wie ich erwartet hatte. Auch - es gibt keine Fehler wird berichtet ...
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
jQuery("#dialogContainer").dialog({
buttons: {
'Ok': function() {
jQuery("#tabsContainer").tabs("select", ui.index);
},
Cancel: function() { return; }
}
});
return false;
}
});
Lösung
Die Ursache des Problems ist, dass window.confirm
blockiert und Dialog jQuery UI nicht. Sie können dies anders durch Strukturierung Code umgehen. Hier ist eine von vielen möglichen Ansätzen:
$(function() {
jQuery('#tabsContainer').tabs({
select: function(event, ui) {
// only allow a new tab to be selected if the
// confirmation dialog is currently open. if it's
// not currently open, cancel the switch and show
// the confirmation dialog.
if (!jQuery('#dialogContainer').dialog('isOpen')) {
$('#dialogContainer')
.data('tabId', ui.index)
.dialog('open');
return false;
}
}
});
jQuery('#dialogContainer').dialog({
autoOpen: false,
buttons: {
'Ok': function() {
// a new tab must be selected before
// the confirmation dialog is closed
var tabId = $(this).data('tabId');
$('#tabsContainer').tabs('select', tabId);
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow