这个方法将来可能被废弃,因为这个实现实在太专断了。为什么是红色,为什么在右上角,等等。唯一的真正答案就是:抄袭 GMail。这里的建议是以本页面中的代码为模板,根据你的需求自定义。
你必须在页面加载以后调用这个方法(例如,不要在 onload()事件触发之前调用),因为它要创建一个隐藏的div 来容纳消息。
最简单的做法时在 onload 事件中调用 DWRUtil.useLoadingMessage,像这样:
<head> <script> function init() { DWRUtil.useLoadingMessage(); } </script> ... </head> <body onload="init();">
可能有些情况下你是不能容易的编辑 header 和 body 标签(如果你在使用 CMS,这很正常),在这样的情况下你可以这样做:
<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>
下面这些是这个函数的代码,它对于你要实现自己的加载消息很有用。这个函数的主要内容是动态创建一个 div(id 是 disabledZone)来容纳消息。重要的代码是当远程调用时使它显示和隐藏.
DWREngine.setPreHook(function() { $('disabledZone').style.visibility = 'visible'; }); DWREngine.setPostHook(function() { $('disabledZone').style.visibility = 'hidden'; }); This is fairly simple and makes it quite easy to implement your own "loading" message. 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 = "0px"; messageZone.style.right = "0px"; messageZone.style.background = "red"; 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'; }); }
下面的做法能简单的使用有加载消息图片:
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'; }); }
然后你就可以这样使用:useLoadingImage(“images/loader.gif”);