Блог

Есть ли хорошее решение jQuery Mobile, похожее на Sencha, для оповещений и диалоговых окон подтверждения?

Да, плагин хорош. Однако, если вам не нужна полная функциональность, все равно гораздо легче запускать собственные простые диалоги. Я использую это:

 <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
});
  

Этот плагин для jQM оформит окно подтверждения в стиле jQM

http://dev.jtsage.com/jQM-SimpleDialog/

РЕДАКТИРОВАТЬ : Этот плагин теперь был заменен SimpleDialog2, который можно найти здесь:

http://dev.jtsage.com/jQM-SimpleDialog/demos2/

Отличный код @ 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");
}
  

Спасибо!

У меня была похожая проблема. Я хотел иметь простую в использовании функцию, подобную стандартной 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 amp;amp; callback) {
            callback();
        }
    }
});
popupDialogObj.popup('open');
popupDialogObj.find(".optionConfirm").first().on('click', function () {
    popupDialogObj.attr('data-confirmed', 'yes');
});
  

}

Я заметил странное поведение, когда перенаправление / очистка окна выполнялось при нажатии кнопки «Да». Это начало работать в событии AfterClose, поэтому это немного сложно.

Вот демонстрация jsfiddle

Этот плагин craftpip / jquery-подтверждает

изначально был разработан для мобильных устройств, основан на платформе bootstrap3. Поддерживает оповещения, подтверждения, модальности, диалоги и множество опций.

Простой в использовании.

 $.alert({
    title: 'title here',
    content: 'content here',
    confirm: function(){
        //on confirm
    },
    cancel: function(){
        // on cancel
    }
})
  

Поддерживает загрузку ajax, анимацию CSS3, адаптивный интерфейс и т.д.

[РЕДАКТИРОВАТЬ] Подробную документацию можно найти здесь

Список функций:

• Темы (включая темы для Android)
• Загрузка содержимого с помощью Ajax.
• CSS3 анимации (2D и 3D анимации)
• Параметры отскока анимации
• Автоматическое закрытие (запускает действие после истечения времени ожидания)
• Значки
• отключение фона (закрывает модал при нажатии вне модала)
• Действия с клавиатуры (триггеры ВВОДА / ПРОБЕЛА подтверждают, триггеры ESC отменяют)
• Подробный API для программного изменения содержимого в модальном режиме.

Я активно разрабатываю плагин, пожалуйста, предложите улучшения и функции.

Я ничего не видел с оповещениями, поскольку думаю, что он использует для них собственный внешний вид. Вы должны иметь возможность настраивать их с помощью другого плагина jQuery и / или CSS.

Вот пример jQuery

Обновить:

Что ж, ссылка теперь 404, а jQM 1.2 отсутствует и предлагает всплывающие окна:

• http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html

Попробуйте,

 if (confirm("Are you sure?"))
{
   /*code to execute when 'Ok' bttn selected*/
}