DWR使用体会3：加载信息DWRUtil.useLoadingMessage

从DWR文档中整理出来的关于加载信息的资料。

加载信息：

1.加载时显示指定图片

在javascript中加入函数

  function useLoadingImage(imageSrc) {
  var loadingImage;
  if (imageSrc) loadingImage = imageSrc;
  else loadingImage = "ajax-loader.gif";
  DWREngine.setPreHook(function() {
    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() {
    $('disabledImageZone').style.visibility = 'hidden';
  });
}

然后修改body中的init()函数

  function init() {
    useLoadingImage("iframe/U1751P410T11D5F84DT20061207163706.jpg");
  }

2.不能在body中加init()时，可用下面的方法

<script>
function init() {
  DWRUtil.useLoadingMessage();
}

if (window.addEventListener) {
  window.addEventListener("load", init, false);
}
else if (window.attachEvent) {
  window.attachEvent("onload", init);
}
else {
  window.onload = init;
}
</script>

3.实现自定义加载信息

function useLoadingMessage(message) {
  var loadingMessage;
  if (message) loadingMessage = message;
  else loadingMessage = "Loading";

  DWREngine.setPreHook(function() {
    var disabledZone = $('disabledZone');
    if (!disabledZone) {
      disabledZone = document.createElement('div');
      disabledZone.setAttribute('id', 'disabledZone');
      disabledZone.style.position = "absolute";
      disabledZone.style.zIndex = "1000";
      disabledZone.style.left = "0px";
      disabledZone.style.top = "0px";
      disabledZone.style.width = "100%";
      disabledZone.style.height = "100%";
      document.body.appendChild(disabledZone);
      var messageZone = document.createElement('div');
      messageZone.setAttribute('id', 'messageZone');
      messageZone.style.position = "absolute";
      messageZone.style.top = "100px";　　//定义显示加载信息层的位置
   　 messageZone.style.left = "400px";　 //定义显示加载信息层的位置
      messageZone.style.width = "200";　　//定义显示加载信息层的宽度
      messageZone.style.height = "50";    //定义显示加载信息层的高度
      messageZone.style.background = "green";//定义显示加载信息层的颜色
      messageZone.style.color = "white";
      messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
      messageZone.style.padding = "4px";
      disabledZone.appendChild(messageZone);
      var text = document.createTextNode(loadingMessage);
      messageZone.appendChild(text);
    }
    else {
      $('messageZone').innerHTML = loadingMessage;
      disabledZone.style.visibility = 'visible';
    }
  });

  DWREngine.setPostHook(function() {
    $('disabledZone').style.visibility = 'hidden';
  });
}

在提供信息文字时，可以传递“<div align=center><font color=#FF99FF size=5>闹闹爱</font></div>”为信息，不过第一次显示的是代码，并不能居中及字体大小、颜色。

 

分享到：

javascript实现消息提示型信息窗口 | JSP调用Java Bean在网页上动态生成柱状图

• 2007-05-12 12:02
• 浏览 3527
• 评论(0)
• 查看更多