from: http://lotuslive.blogdriver.com/lotuslive/1180945.html
其实DWRUtil.useLoadingImage使用的是DWREngine的钩子,设置了PreHook()和PostHook()。
DWREngine.setPreHook(function)在调用DWR之前,运行function函数。DWREngine.setPostHook(function)在调用完DWR后,运行function函数。所以我们可以用它来显示程序运行时的动画效果,并可以解决表单重复提交的问题。例如:点击提交按钮后,就把按钮隐藏,后台程序运行完毕后,再把按钮显示出来。为此目的,下面修改了DWRUtil.useLoadingImage代码:
/**
* 使用loading image,并且还可以隐藏按钮
* @param imageSrc 图像地址
* @param item 要隐藏的html item对象数组
* @author huangqiao
* @date 2006-5-11
*/
DWRUtil.useLoadingImage = function(imageSrc,items) {
var loadingImage;
if (imageSrc) loadingImage = imageSrc;
else loadingImage = "ajax-loader.gif";
DWREngine.setPreHook(function() {
if(items != null) {
for(var i=0; i<items.length; i++)
items[i].style.visibility = 'hidden';
}
var disabledImageZone = $('disabledImageZone');
if (!disabledImageZone) {
disabledImageZone = document.createElement('div');
disabledImageZone.setAttribute('id', 'disabledImageZone');
disabledImageZone.style.position = "absolute";
disabledImageZone.style.zIndex = "1000";
disabledImageZone.style.left = "0px";
disabledImageZone.style.top = "0px";
disabledImageZone.style.width = "100%";
disabledImageZone.style.height = "100%";
var imageZone = document.createElement('img');
imageZone.setAttribute('id','imageZone');
imageZone.setAttribute('src',imageSrc);
imageZone.style.position = "absolute";
imageZone.style.top = "0px";
imageZone.style.right = "0px";
disabledImageZone.appendChild(imageZone);
document.body.appendChild(disabledImageZone);
}
else {
$('imageZone').src = imageSrc;
disabledImageZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
if(items != null) {
for(var i=0; i<items.length; i++)
items[i].style.visibility = 'visible';
}
$('disabledImageZone').style.visibility = 'hidden';
});
};
使用方法,在页面加载时就调用此函数:
DWRUtil.useLoadingImage("images/loader.gif",[$("buttonId_1"),$("buttonId_2")]);
当调用DWR时,就会显示加载图片,并将id为"buttonId_1"和"buttonId_2"的按钮隐藏;调用结束后,隐藏加载图片,并将已隐藏的按钮再次显示出来。
如果不想隐藏按钮,直接使用DWRUtil.useLoadingImage("images/loader.gif")即可。注意的是:DWRUtil.useLoadingImage只需调用一次就可设置DWR引擎的钩子,在同个页面中不需再多次调用。
posted on 2008-07-17 10:50
henry1451 阅读(315)
评论(0) 编辑 收藏