jQuery Mobile 警报/确认对话框

Question

对于警报和确认对话框，是否有类似 Sencha 的不错的 jQuery Mobile 解决方案？

Answer 1

是的，插件很好。但是，如果您不需要全部功能，那么滚动您自己的简单对话框的重量仍然要轻得多。我用这个：

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

Answer 2

这个 jQM 插件将使用 jQM 样式设置确认框的样式

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

编辑：此插件现已被 SimpleDialog2 取代，可在此处找到：

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

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

谢谢！

Answer 4

我有类似的问题。我想拥有像标准confirm()这样易于使用的功能。

由于在 jquery mobile 1.4 (documentation) 中已弃用对话框，我决定创建自己的小提琴：

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 事件中开始工作，所以它有点复杂。

Here is a jsfiddle demo

Answer 5

这个插件 craftpip/jquery-confirm

最初是为移动设备设计的，基于 bootstrap3 框架。 支持警报、确认、模式、对话框和许多选项。

使用简单。

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

支持ajax加载、CSS3动画、响应式等

[编辑] 详细文档可以看here

功能列表：

• 主题（包括安卓主题）
• Ajax 加载内容。
• CSS3 动画（2D 和 3D 动画）
• 动画反弹选项
• 自动关闭（超时后触发操作）
• 图标
• 背景关闭（在模态外部单击时关闭模态）
• 键盘操作（ENTER/SPACE 触发确认，ESC 触发取消）
• 用于以编程方式更改模态内容的详细 API。

我正在积极开发插件，请提出改进​​和功能。

Answer 6

我没有看到任何带有警报的东西，因为我认为它使用了它们的原生外观。您应该能够通过另一个 jQuery 插件和/或 CSS 自定义它们。

这是jQuery Example

更新：

现在链接是 404，jQM 1.2 已经发布并提供弹出窗口：

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

Answer 7

试试，

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