我正在尝试使用JQuery UI对话框来取代丑陋的javascript:alert()
框。在我的场景中,我有一个项目列表,在每个项目的旁边,我会有一个“删除”按钮。psuedo html设置如下:
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
在JQ part中,在文档就绪时,我会首先将div设置为带有必要按钮的模式对话框,并在删除之前将那些要触发的"a“设置为确认,例如:
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}
好了,问题来了。在初始化期间,对话框将不知道谁(项目)将启动它,也不知道项目id (!)。我如何设置这些确认按钮的行为,以便在用户仍然选择YES的情况下,它会跟随链接将其删除?
发布于 2009-06-09 22:33:12
我只是不得不解决同样的问题。实现此功能的关键在于,必须在click
事件处理程序中为要使用确认功能的链接部分初始化dialog
(如果要将此功能用于多个链接)。这是因为必须将链接的目标URL注入到用于确认按钮单击的事件处理程序中。我使用了一个CSS类来指示哪些链接应该具有确认行为。
以下是我的解决方案,为了适合示例,将其抽象出来。
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
我相信,如果您能够使用CSS类(在我的示例中是confirmLink
)生成链接,那么这将对您起作用。
这是一个包含代码的jsfiddle。
为了充分披露,我会注意到我花了几分钟在这个特定的问题上,我给this question提供了一个类似的答案,当时也没有一个公认的答案。
发布于 2009-11-19 05:36:40
我发现Paul的回答不太有效,因为他在click事件上实例化对话框后设置选项的方式是不正确的。这是我的代码,它正在工作。我并没有根据Paul的例子对它进行裁剪,但它只是在某些元素命名不同方面的差别。你应该能够解决这个问题。更正位于单击事件上按钮的对话框选项的设置器中。
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
bgiframe: true,
width: 500,
height: 200,
autoOpen: false
});
$(".lb").click(function(e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog").dialog('option', 'buttons', {
"Confirm" : function() {
window.location.href = theHREF;
},
"Cancel" : function() {
$(this).dialog("close");
}
});
$("#dialog").dialog("open");
});
});
希望这篇文章能对其他人有所帮助,因为这篇文章最初让我走上了正确的道路,我想我最好还是发表更正吧。
发布于 2012-01-17 19:22:39
我已经为jquery ui确认对话框创建了一个我自己的函数。以下是代码
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: {
OK: function () {
if (typeof (okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function () {
if (typeof (cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
现在,要在代码中使用它,只需编写以下代码
myConfirm('Do you want to delete this record ?', function () {
alert('You clicked OK');
}, function () {
alert('You clicked Cancel');
},
'Confirm Delete'
);
去吧。
https://stackoverflow.com/questions/887029
复制相似问题