Есть ли в Sencha-like jQuery Mobile решение для диалогов Alerts и Confirmation?
Диалоговые диалоги jQuery Mobile Alert/Confirmation
Ответ 1
Этот плагин для jQM будет стилизовать окно подтверждения с помощью стиля jQM
http://dev.jtsage.com/jQM-SimpleDialog/
РЕДАКТИРОВАТЬ: Этот плагин теперь был superseedeed от SimpleDialog2, который можно найти здесь:
Ответ 2
Да, плагин хорош. Однако, если вам не нужны полные функциональные возможности, все еще намного легче поместить свои собственные простые диалоги. Я использую это:
<div data-role="dialog" id="sure" data-title="Are you sure?">
<div data-role="content">
<h3 class="sure-1">???</h3>
<p class="sure-2">???</p>
<a href="#" class="sure-do" data-role="button" data-theme="b" data-rel="back">Yes</a>
<a href="#" data-role="button" data-theme="c" data-rel="back">No</a>
</div>
</div>
И это:
function areYouSure(text1, text2, button, callback) {
$("#sure .sure-1").text(text1);
$("#sure .sure-2").text(text2);
$("#sure .sure-do").text(button).on("click.sure", function() {
callback();
$(this).off("click.sure");
});
$.mobile.changePage("#sure");
}
Вы можете использовать их везде, где вам нужен диалог подтверждения:
areYouSure("Are you sure?", "---description---", "Exit", function() {
// user has confirmed, do stuff
});
Ответ 3
Отличный код @Peter, но не для создания последовательных событий, лучше использовать unbind(), например:
function areYouSure(text1, text2, button, callback) {
$("#sure .sure-1").text(text1);
$("#sure .sure-2").text(text2);
$("#sure .sure-do").text(button).unbind("click.sure").on("click.sure", function() {
callback(false);
$(this).off("click.sure");
});
$.mobile.changePage("#sure");
}
Спасибо!
Ответ 4
У меня была аналогичная проблема. Я хотел иметь удобную функцию, например, стандартную confirm()
.
Поскольку диалоги устарели в jquery mobile 1.4 (документация), я решил создать свою собственную скрипку:
function confirmDialog(text, callback) {
var popupDialogId = 'popupDialog';
$('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:500px;"> \
<div data-role="header" data-theme="a">\
<h1>Question</h1>\
</div>\
<div role="main" class="ui-content">\
<h3 class="ui-title">' + text + '</h3>\
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionConfirm" data-rel="back">Yes</a>\
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionCancel" data-rel="back" data-transition="flow">No</a>\
</div>\
</div>')
.appendTo($.mobile.pageContainer);
var popupDialogObj = $('#' + popupDialogId);
popupDialogObj.trigger('create');
popupDialogObj.popup({
afterclose: function (event, ui) {
popupDialogObj.find(".optionConfirm").first().off('click');
var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
$(event.target).remove();
if (isConfirmed && callback) {
callback();
}
}
});
popupDialogObj.popup('open');
popupDialogObj.find(".optionConfirm").first().on('click', function () {
popupDialogObj.attr('data-confirmed', 'yes');
});
}
Я заметил странное поведение, когда окно перенаправления/очистки было нажато на кнопку "Да". Он начал работать в событии afterClose, поэтому почему это немного сложно.
Ответ 5
Этот плагин craftpip/jquery-confirm
был разработан для мобильных устройств первоначально, основан на базе bootstrap3. Поддержка предупреждений, подтверждений, модалов, диалогов и многих параметров.
Простота использования.
$.alert({
title: 'title here',
content: 'content here',
confirm: function(){
//on confirm
},
cancel: function(){
// on cancel
}
})
Поддерживает загрузку ajax, анимацию CSS3, отзывчивую и т.д.
[EDIT] Подробную документацию можно найти здесь
Список функций:
- Темы (включены темы для Android)
- Загрузка содержимого Ajax.
- анимации CSS3 (2D и 3D-анимации)
- Параметры анимации для анимации
- Автоматическое закрытие (вызывает действие после таймаута)
- Иконки
- background off (закрывает модальный клик вне модального)
- Действия клавиатуры (триггеры ENTER/SPACE подтверждают, что триггеры ESC отменены)
- Подробный API для программно изменяющегося контента в модальном режиме.
Я активно разрабатываю плагин, предлагаю улучшения и функции.
Ответ 6
Я ничего не видел с предупреждениями, поскольку, по-моему, он использует для себя внешний вид и чувство. Вы должны иметь возможность настраивать их через другой плагин jQuery и/или CSS.
Вот пример jQuery
ОБНОВЛЕНИЕ:
Ну, теперь ссылка - 404, а jQM 1.2 отсутствует и предлагает всплывающие окна:
Ответ 7
Попробуйте,
if (confirm("Are you sure?"))
{
/*code to execute when 'Ok' bttn selected*/
}