jQuery UI Tabs и диалог - Как подтвердить вкладки переключения с помощью подтверждения на основе диалогового плагина?
-
26-09-2019 - |
Вопрос
Итак, цель состоит в том, чтобы подтвердить переключение на другую вкладку UI, используя диалоговое окно пользовательского интерфейса. Использование общего метода подтверждения прост:
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
return confirm("Some confirmation message...");
}
});
Но как добиться того же поведения, используя диалоговое окно модальную коробку?
Я думаю, что я должен позвонить:
jQuery("#tabsContainer").tabs("select", ui.index);
На «ОК Callback», но это не работает, как я ожидал. Кроме того - нет никаких ошибок ...
jQuery("#tabsContainer").tabs({
select: function(event, ui) {
jQuery("#dialogContainer").dialog({
buttons: {
'Ok': function() {
jQuery("#tabsContainer").tabs("select", ui.index);
},
Cancel: function() { return; }
}
});
return false;
}
});
Решение
Источник вашей проблемы в том, что window.confirm
Диалог блокировки и jQuery Ui нет. Вы можете обойти это, структурируя свой код по-другому. Вот один из многих возможных подходов:
$(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');
}
}
});
});
Не связан с StackOverflow