artDialog 弹出框插件,或者说是弹出对话框插件,需要对弹出后的对话框操作?artDialog的控制接口就是用来干这些事情的,这在异步消息操作中非常有用。 artDialog功能特性: 自适应内容、强大的接口配置参数、细致的体验、预先缓存皮肤图片更快响应、跨平台兼容兼容:IE6+、Firefox、Chrome、Safari、 Opera。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景等,而且在artDialog弹出框插件 中,框架应用扩展将完全被简化。
最近项目中有使用到artDialog,遇到一些问题:
1:弹窗open一个新页面,在点击弹窗的确定按钮时保存数据并关闭该弹出框并刷新父页面。
下面有个例子,转载于zhangwu
打开编辑页面代码,确定事件调用了页面上隐藏的btnsave按钮。 art.dialog.open(url, { id: 'pg123', title: strtitle, lock: false, width: wid, height: hei, ok: function () { var iframe = this.iframe.contentWindow; iframe.document.getElementById("btnsave").click(); return false; }, cancel: true }); 保存后调用 function showtip2(str) { art.dialog.tips(str, 1.5); setTimeout('originreload()', 1000); } function originreload() { var win = art.dialog.open.origin;//来源页面 win.location.reload(); } 刷新父窗体,自动关闭弹出窗体。
以上代码我使用后还是有问题,在保存时调用方法sumitModelForm(),在其后调用showtip2("操作成功!");后,数据保存了,但是窗口未关闭。
function sumitModelForm(){ if($("#modelForm").valid()){ $("#modelForm").submit(); } }
经过检查+不断测试,发现ajaxForm可以完善该功能。我之前是直接form.submit()的。
修改代码如下:
1)在弹窗新开页面引入jquery.form.js 以及 artDialog库;
2)后台操作后使用response.getWrite().print("success")来表示操作成功等;
3)父页面弹窗代码
var alt=null; function openAddUser(operId){ alt = art.dialog.open("openSavePage.do?operId="+operId, { id:'evaluate'+operId, title: '新增用户', width :500, height:320, lock : true, opacity : 0.4, init: function () { }, button :[ { name : '确定', callback : function(){ var iframe = this.iframe.contentWindow; if (!iframe.document.body) { return false; }; iframe.sumitModelForm(); return false; }, focus : true },{ name : '取消', callback : function(){ this.close(); } } ], cancel: true }); }
4)子页面代码
$(document).ready(function(){ $("#modelForm").validate({ errorClass:"text-error" }); var options = { success: function(data) { if(data=="success"){ showTip("操作成功","succeed"); }else{ showTip("操作失败","warning"); } }}; $('#modelForm').ajaxForm(options); }); //提交form function sumitModelForm(){ $('#modelForm').submit(); } //消息提示 function showTip(mess,icon) { art.dialog.through({ id : 'Tip', title : '消息', fixed : true, lock : true, opacity: .2, content : mess, icon : icon, time : 1 }); setTimeout('originReload()', 1000); } //重载来源页面 function originReload(){ var win = art.dialog.open.origin; win.location.reload(); }
<form id="modelForm" method="post" action="save.do"> ...编辑域... </form>
以上代码,通过artdialog弹出form表单,并通过ajaxform来提交的js(表单可以采用jquery validate验证控件来验证表单),达到了我想要的效果。虽然比较曲折,对js还是得加强学习。
如果不想重装源页面,只想关闭dialog而已。
则使用一下方法closeAllDialog()替换掉之前的originReload()方法即可:
//关闭源页面上的所有dialog function closeAllDialog(id) { //获得弹出窗口的源页面 var win = art.dialog.open.origin; var list = win.art.dialog.list; for (var i in list) { list[i].close(); }; }