如何构建一个jQuery对话框确认(是/否),可以在应用程序的任何地方工作
How to build a jQuery dialog for confirmation (yes/no) that can work anywhere in an app?
我有以下内容:
<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>
我想在这里做的是任何时候。delete被点击,我想显示一个jQuery ui-对话框确认,是或否....如果用户说是,那么继续点击删除按钮,它就会像今天一样被删除。
我如何建立一个jQuery UI对话框,是静态的,将为任何数量的列表项工作?更好的是,它将适用于我的应用程序中的任何东西,所以它不仅仅是特定于列表。
想法?由于
使用JQuery UI对话框的示例-
Demo - 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/
$('.delete').live('click', function(){
yesnodialog('Yes', 'No', $(this));
})
我也做过类似的事情。在非常高的级别上,您必须停止点击的传播,显示对话框,然后根据响应再次触发点击。
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;
}
});
您可以使用这个库:http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/
然后你可以这样做:
$(function(){
$(".delete").livequery('click', function(){
jConfirm('Message', 'Title', function(confirmed){
if(confirmed){
alert('Delete confirmed');
}
});
});
});
我喜欢使用livequery插件,因为它与加载页面后添加的DOM元素一起工作。但是如果你不担心这个,把livequery
换成bind
。
您可以将对话框逻辑包装在控制器对象中。
然后,当您实例化控制器对象时,您可以将它传递给对话框将作用的元素以及ajax提交数据。
当用户在对话框中单击yes时,现在控制器中包含了该数据,您可以提交它。
像这样:
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");
}
}
});
}
你可以这样做:
var dialog = new MyApp.MyDialog("#myElement", {foo: "bar"});
相关文章:
- 是否有任何开源web应用程序具有良好的QUnit(或JSUnit)测试用例
- 如何在 Rails 应用程序中使用任何 JavaScript 代码
- PhantomJs:Spawn没有打开任何应用程序
- IE窗口失去了对任何XMLHttpRequest启动Angular应用程序的关注
- JQuery在执行速度上是否有任何缺点,这些缺点在大规模的web应用程序中可能会很明显
- 扩展成员应用程序,包括新的路线,现在没有任何渲染
- 在过去24小时内,谷歌应用程序脚本或可视化API的任何变化
- 是否有任何twitter功能用于登录应用程序
- 是否可以提供一个特定的URL,供任何在网络应用程序中为页面添加书签的人使用
- 有没有任何方法可以在单页应用程序中记录url和哈希片段
- 是否有任何Office Apps javascript API可以在客户端应用程序中打开SharePoint Word文
- 如果我动态创建jquery UI对话框,除了在单页应用程序中调用对话框(“关闭”)之外是否有任何清理
- 在谷歌应用程序脚本中处理脚本,任何建议
- 在 React 应用程序中单击除特定 DOM 节点之外的任何内容上的事件
- Phonegap如何检查Android设备是否已经具有任何地图应用程序
- 有关交互式地图应用程序的任何建议
- 从任何客户端访问帆船应用程序
- Google Chrome 应用程序:任何 SSH/SFTP JS 库
- 从同一设备上运行的html或javascript代码/页面调用已安装的移动facebook应用程序(任何平台androi
- 默认的带有wiredp、concat和cdnify的angular应用程序——任何东西实际上是如何被识别的?