from: http://lotuslive.blogdriver.com/lotuslive/1180945.html
其實(shí)DWRUtil.useLoadingImage使用的是DWREngine的鉤子,設(shè)置了PreHook()和PostHook()。
DWREngine.setPreHook(function)在調(diào)用DWR之前,運(yùn)行function函數(shù)。DWREngine.setPostHook(function)在調(diào)用完DWR后,運(yùn)行function函數(shù)。所以我們可以用它來(lái)顯示程序運(yùn)行時(shí)的動(dòng)畫(huà)效果,并可以解決表單重復(fù)提交的問(wèn)題。例如:點(diǎn)擊提交按鈕后,就把按鈕隱藏,后臺(tái)程序運(yùn)行完畢后,再把按鈕顯示出來(lái)。為此目的,下面修改了DWRUtil.useLoadingImage代碼:
/**
* 使用loading image,并且還可以隱藏按鈕
* @param imageSrc 圖像地址
* @param item 要隱藏的html item對(duì)象數(shù)組
* @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';
});
};
使用方法,在頁(yè)面加載時(shí)就調(diào)用此函數(shù):
DWRUtil.useLoadingImage("images/loader.gif",[$("buttonId_1"),$("buttonId_2")]);
當(dāng)調(diào)用DWR時(shí),就會(huì)顯示加載圖片,并將id為"buttonId_1"和"buttonId_2"的按鈕隱藏;調(diào)用結(jié)束后,隱藏加載圖片,并將已隱藏的按鈕再次顯示出來(lái)。
如果不想隱藏按鈕,直接使用DWRUtil.useLoadingImage("images/loader.gif")即可。注意的是:DWRUtil.useLoadingImage只需調(diào)用一次就可設(shè)置DWR引擎的鉤子,在同個(gè)頁(yè)面中不需再多次調(diào)用。
posted on 2008-07-17 10:50
henry1451 閱讀(321)
評(píng)論(0) 編輯 收藏