jQuery UI Tabs e di dialogo - Come confermare schede con conferma la commutazione basata sul plug-in di dialogo?
-
26-09-2019 - |
Domanda
Quindi, l'obiettivo è quello di commutazione conferma per un'altra scheda di interfaccia utente con UI Dialog plugin. Utilizzando il metodo confirm comune è semplice:
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
return confirm("Some confirmation message...");
}
});
ma come per ottenere lo stesso comportamento utilizzando dialogo modale di dialogo?
Penso di avere a chiamare:
jQuery("#tabsContainer").tabs("select", ui.index);
sul "callback ok", ma questo non sta funzionando come mi aspettavo. Inoltre - non ci sono errori che sono segnalati ...
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
jQuery("#dialogContainer").dialog({
buttons: {
'Ok': function() {
jQuery("#tabsContainer").tabs("select", ui.index);
},
Cancel: function() { return; }
}
});
return false;
}
});
Soluzione
La causa del problema è che window.confirm
sta bloccando e finestra di dialogo di jQuery UI non è. È possibile aggirare questo strutturare il codice in modo diverso. Ecco uno dei molti approcci possibili:
$(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');
}
}
});
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow