基于父窗口打开子窗口，效果超炫，用jquery AJAX 动态无刷新提交...
下面先来分析代码：父窗体页面代码
< a href ="javascript:void(0);" url ='openerWeb.aspx' id ="aparent" > 编辑 </ a >
< div id ="blockOpTip" style ="display:none;" class ="tipbox" >< img src ="http://images.cnblogs.com/busy.gif" alt ="wait" /> < span id ="blockOpTipAction" > 正在保存,请稍等... </ span ></ div >
< div id ="wrap" >
< div >< img src ="/styles/1/busy.gif" id ="wrapImg" />< span id ="wrapTitle" ></ span ></ div >
< div id ="wrapBtn" >< input class ="ok" type ="button" />< input class ="cancel" type ="button" /></ div >
< iframe id ="blockFrame" style ="display:none" name ="blockFrame" width ="100%" height ="100%" frameborder ="0" scrolling ="auto" ></ iframe >
</ div >
</ div >
子窗体代码：
< form id ="form1" runat ="server" >
子窗口.........dddd </ form >
< div id ="blockOpTip" style ="display:none;" class ="tipbox" >< img src ="/images/busy.gif" alt ="wait" /> < span id ="blockOpTipAction" > 正在保存,请稍等... </ span ></ div >
< div id ="wrap" >
< div >< img src ="/styles/1/busy.gif" id ="wrapImg" />< span id ="wrapTitle" ></ span ></ div >
< div id ="wrapBtn" >< input class ="ok" type ="button" />< input class ="cancel" type ="button" /></ div >
< iframe id ="blockFrame" style ="display:none" name ="blockFrame" width ="100%" height ="100%" frameborder ="0" scrolling ="auto" ></ iframe >
</ div >
</ div >
父窗口的js代码：
<script type="text/javascript">
function saveDetail() {
alert("ok");
$.ajaxCommon("正在保存，请耐心等待....", "openerWeb.aspx?act=save", null, function (p) {
if (p.succ) { parent.unBlock(); }
});
return false;
}
</script>
子页面和父页面都要引用jextending.js，这个文件有两个主要的方面，分别如下：
function showEdit(src, title, width, height, saveCallBack,bottom,showInTop) {
submitFunc=null;
loadFunc = null;
var b=bottom==undefined?true:bottom;//是否需要底部的保存关闭按钮
if (parent.p == true && showInTop!=false&&showInTop==undefined) {
//如果存在父窗口，则开始父窗口的弹出框
parent.showEdit(src, title, width, height, saveCallBack, b,true);
return;
}
submitFunc = (saveCallBack == undefined || saveCallBack == null) ? (function () { }) : saveCallBack;
var isObject=(typeof(src)=="object");
var obj=src;
if (!isObject) {
var href = src;
if (href.indexOf('?') > 0) {
href += "&mm=" + Math.random();
}
else {
href += "?mm=" + Math.random();
}
obj=$("#blockFrame").attr("src",href);
}
$.load("正在加载....");
loadFunc=function(){
ub(true);
$.blockUI({ message:obj , theme: true, title: title,fadeOut:false,needBottom:b,
themedCSS: { width: width, height: height },
onBlock: function () {
if (typeof (submitFunc) == "function") {
$("#blockDiv").find(".bottom input[name='save']").bind("click",function () { submitFunc(); }); //执行保存按钮
}
}
});
};
setTimeout(loadFunc,2000);
}。这是一个打开子页面的函数，它包括延时加载效果设置，及打开窗口的相关设置. 第二函数是ajaxCommon提交处理函数。
$.ajaxCommon = function (title, url, data, callback, isOnlyCallBack) {
$.load(title); //设置载入状态
$.ajax({
url: url + (url.indexOf("?") == -1 ? "?" : "&") + "s=" + Math.random(),
type: 'POST',
dataType: 'json',
data: data,
error: function (a) {
$.error(a);
},
success: function (json) {
if (json.succ == 1 || json.succ) {
setTimeout("$.correct('" + json.message + "')", 500);
timeOutFunc = setTimeout("ub()", 1500);
if (typeof (callback) == "function") {
window.setTimeout(callback,1700,json);
}
}
else {
var info = json.Info || json.message;
if (isOnlyCallBack!=undefined&&isOnlyCallBack==true) { callback(json); return; }
$.error(info);
callback(json);
}
return;
}
});
};这是一个AJAX提交处理的函数，包括载入状态，处理结果的返回及子窗口关闭等相关的.
下面是相关效果的截图，如下：
点击“编辑”按钮，出现如下效果..
完全载入后...如下效果：
可以随意拖动....：
点击“保存”按钮，效果如下：
以上就是全部的相关介绍，还包含其他的一些JS,css样式再这里就不作介绍了，有兴趣的朋友可以下载源代码看看..
源码下载地址：http://files.cnblogs.com/howzanh/JSWebDemo.zip