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();
};
}