posts - 60,comments - 71,trackbacks - 0
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 阅读(307) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: