在同一个页面父窗口打开子窗口,动态无刷新提交,超炫基于jquery ajax提交,兼容IE7+,火狐..
2011-01-02 23:42
393 查看
基于父窗口打开子窗口,效果超炫,用jquery AJAX 动态无刷新提交...
下面先来分析代码:父窗体页面代码
子窗体代码:
父窗口的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
下面先来分析代码:父窗体页面代码
<div> <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>
子窗体代码:
<div class="ManagerForm"> <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
相关文章推荐
- .NET实例(伪异步表单提交,实现无刷新表单(含文件)提交) 兼容IE 火狐 基于LGPL开源 谢绝转载
- 用window.showModalDialog()打开一个新窗口,但是提交的时候会打开一个新页面解决办法
- [原创]由一个窗口打开另一个窗口向这个打开的窗口传值(要求第一个窗口不刷新页面)
- 关于showmodaldialog 打开新窗口后提交表单操作时,避免弹出新窗口和避免从后台获取“新数据”后不能刷新当前模态页面的解决方案
- .NET中用弹出窗口添加或修改一个页面,当添加或修改相关内容后按下提交按钮自动刷新页面的JS代码
- 打开一个页面,返回主页面,刷新本页面
- 在页面上打开一个新的窗口,并设置它的长宽高...
- 处理F5刷新页面重复提交页面的一个思路
- 设计一个有3个超链接的页面,单击这些链接时分别打开和关闭窗口以及关闭本身窗口。
- 使用selenium+python;在页面A点击一个按钮跳转到页面B,页面A没有关闭,浏览器打开了一个B,切换窗口定位页面B的元素
- ASP.NET学习笔记[7] - aspx页面打开一个新窗体无刷新传值
- 提交一个from的时候,struts2处理完返回结果打开一个新页面,用target="blank"
- Javascript 用本页面文本域中的HTML代码打开一个空白窗口来运行
- 表单提交时单独打开一个页面
- 写了一个提交自动刷新的页面
- 用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
- 用showModalDialog打开的窗口关闭时刷新父页面
- Jquery 浏览器页面窗口刷新或关闭时,执行后台方法(兼容各主流浏览器)
- jquery ajax刷新局部页面,取得数据后,动态的在前台显示
- 一个使用AJAX动态改变页面刷新的东东~~