有没有一个类似于Sencha的jQuery Mobile解决方案，用于警报和确认对话框？
7个回答
41
是的，这个插件很好。但是如果你不需要完整的功能，自己编写简单的对话框会更轻便。我使用以下代码：
<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
});
- Peter
5
20
这个用于jQM的插件可以使用jQM样式来装饰确认对话框
http://dev.jtsage.com/jQM-SimpleDialog/
编辑 : 这个插件现在已经被SimpleDialog2取代，可以在下面的链接找到:
- Martin
2
1这个插件确实很棒。弹出对话框正是我一直在寻找的。如果你还不知道它，那么它值得一试。 - chmike
如果你正在使用Backbone，这里是我简单的实现 http://derekzeng.me/blog/2013/12/11/diy-jqm-popup-dialog/ - coderek
5
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");
}
谢谢！
- Taylor
5
我有类似的问题。我想要一个像标准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');
});
我注意到在单击"Yes"按钮时重定向/清除窗口后出现了奇怪的行为。它开始在afterClose事件中工作，所以这就是为什么它有点复杂的原因。
- loleksy
1
差不多就是我想要的。最后我只是将定义的模态框留在页面上，删除了前几行以及$(event.target).remove();。谢谢。 - Sotelo
1
这个插件 craftpip/jquery-confirm 最初是为移动设备设计的，基于bootstrap3框架。支持警报、确认、模态、对话框等多种选项。使用简单。
$.alert({
title: 'title here',
content: 'content here',
confirm: function(){
//on confirm
},
cancel: function(){
// on cancel
}
})
支持ajax加载、CSS3动画、响应式等功能。
[编辑] 详细文档可以在这里找到。
功能列表：
- 主题（包括Android主题）
- Ajax加载内容。
- CSS3动画（2D和3D动画）
- 弹跳动画选项
- 自动关闭（超时后触发操作）
- 图标
- 背景关闭（点击模态框外部关闭模态框）
- 键盘操作（ENTER/SPACE触发确认，ESC触发取消）
- 详细API，可编程更改模态框中的内容。
我正在积极开发插件，请提出改进和功能建议。
- Boniface Pereira
0
我还没有看到使用警报的任何东西，因为我认为它们使用本地外观和感觉。您应该能够通过另一个jQuery插件和/或CSS进行自定义。
这里有一个jQuery示例
更新：
好吧，链接现在是404了，而且jQM 1.2已经发布并提供弹出窗口：
- Phill Pafford
2
4您的链接已经失效了，404错误。 - Jay Mayu
这是一个好的链接：http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/ - Stephan
-2
试一下，
if (confirm("Are you sure?"))
{
/*code to execute when 'Ok' bttn selected*/
}
- kannankeril
1
2它能够工作，但使用了默认的JavaScript对话框。设计是最小化的，在Android上它会显示调用confirm()函数的页面的URL，这会让用户感到困惑。 - chmike
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
areYouSure(<参数>)；alert("blabla");，它将显示对话框和警告，而不像普通的 JavaScript 警告/提示。这对于函数调用后的任何指令都是正确的，而不仅仅是警告... - Stephan