Javascript 如何构建一个可以在应用程序中的任何地方工作的用于确认（是/否）的 jQuery 对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7919845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to build a jQuery dialog for confirmation (yes/no) that can work anywhere in an app?
提问by AnApprentice
I have the following:
我有以下几点：
<ol id="listItems>
<li id="listItem-1">
<span class="title">Item 1</span>
<span class="delete">delete</span>
</li>
<li id="listItem-2">
<span class="title">Item 2</span>
<span class="delete">delete</span>
</li>
<li id="listItem-3">
<span class="title">Item 3</span>
<span class="delete">delete</span>
</li>
<li id="listItem-4">
<span class="title">Item 4</span>
<span class="delete">delete</span>
</li>
</ol>
What I want to do here is anytime .delete is clicked, I want to show a jQuery ui-dialog for confirmation, Yes or No.... If the user says yes then continue with the delete click where it will be deleted as is today.
我想要在这里做的是任何时候点击 .delete，我想显示一个 jQuery ui-dialog 进行确认，是或否...。如果用户说是，然后继续点击删除，它将被原样删除今天。
How can I build a jQuery UI Dialog that is static and would work for any number of list items? Better yet would work for anything in my app so it's not just list specific.
如何构建一个静态的 jQuery UI 对话框并且可以用于任意数量的列表项？更好的是适用于我的应用程序中的任何内容，因此它不仅仅是特定于列表的。
Ideas? Thanks
想法？谢谢
回答by Jayendra
Example using JQuery UI dialog -
使用 JQuery UI 对话框的示例 -
Demo - http://jsfiddle.net/CdwB9/3/
演示 - http://jsfiddle.net/CdwB9/3/
function yesnodialog(button1, button2, element){
var btns = {};
btns[button1] = function(){
element.parents('li').hide();
$(this).dialog("close");
};
btns[button2] = function(){
// Do nothing
$(this).dialog("close");
};
$("<div></div>").dialog({
autoOpen: true,
title: 'Condition',
modal:true,
buttons:btns
});
}
$('.delete').click(function(){
yesnodialog('Yes', 'No', $(this));
})
With live -
随着直播 -
Demo - http://jsfiddle.net/CdwB9/4/
演示 - http://jsfiddle.net/CdwB9/4/
$('.delete').live('click', function(){
yesnodialog('Yes', 'No', $(this));
})
回答by rkw
I've done something similar. On a very high level, you have to stop the propagation of the click, display the dialog, then trigger the click again based on the response.
我做过类似的事情。在非常高的层次上，您必须停止点击的传播，显示对话框，然后根据响应再次触发点击。
var confirmed = false;
$('span.delete').click(function(e) {
if (!confirmed) {
var that = $(this);
$( "#dialog-confirm" ).dialog({
buttons: {
"Delete": function() {
confirmed = true;
that.trigger('click');
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
e.stopPropagation();
} else {
confirmed = false;
}
});
回答by Sergio Campamá
You could use this library: http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/
你可以使用这个库：http: //labs.abeautifulsite.net/projects/js/jquery/alerts/demo/
Then you could do something like:
然后你可以做这样的事情：
$(function(){
$(".delete").livequery('click', function(){
jConfirm('Message', 'Title', function(confirmed){
if(confirmed){
alert('Delete confirmed');
}
});
});
});
I like to use the livequery plugin because it works with DOM elements added after the page has loaded. But if you're not worried about that, change livequerywith bind.
我喜欢使用 livequery 插件，因为它适用于页面加载后添加的 DOM 元素。但是，如果您不担心，请livequery使用bind.
回答by Keith.Abramo
You can wrap your dialog logic in a controller object.
您可以将对话逻辑包装在控制器对象中。
Then when you instantiate the controller object you can pass it in the element the dialog will act on as well as the ajax submision data.
然后，当您实例化控制器对象时，您可以将它传递到元素中，对话框将作用于 ajax 提交数据。
When the user clicks yes in the dialog you now have that data contained in your controller and you can just submit it.
当用户在对话框中单击“是”时，您的控制器中现在已包含该数据，您只需提交即可。
Something like this:
像这样的东西：
MyApp = {}
MyApp.MyDialog = function(context, ajaxData) {
this.context = context;
this.ajaxData = ajaxData;
this.initializeDialog();
}
MyApp.MyDialog.prototype.initializeDialog = function(){
$(this.context).dialog({
//Your other dialog options here,
buttons: {
"yes": function(){
//Do ajax post with this.ajaxData
},
"No": function(){
this.context.dialog("close");
}
}
});
}
You can then do something like:
然后，您可以执行以下操作：
var dialog = new MyApp.MyDialog("#myElement", {foo: "bar"});
