学习一下
 |
wsq777
2008-05-15
我看了官方的ext js网站上每次加载页面都会出现一个这样的类似加载页面的 图 ， 过了一会儿 这个图片就消失了 请问 如何实现的
|
 |
upup1000
2008-05-16
Ext.LoadMask
|
|
upup1000
2008-05-16
show和hide方法
|
|
wsq777
2008-05-16
谢谢 昨天已经搞定了
我是这样的在加载的页面中加了CSS使其全屏展示（看官方的） <style type="text/css"> #loading-mask{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:20000; background-color:white; } #loading{ position:absolute; left:45%; top:40%; padding:2px; z-index:20001; height:auto; } #loading .loading-indicator{ background:white; color:#444; font:bold 20px tahoma,arial,helvetica; padding:10px; margin:0; height:auto; } #loading-msg { font: normal 18px arial,tahoma,sans-serif; } </style> <!-- 退去加载效果 --> <script type="text/javascript"> Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}}); </script> login.jsp全部如下： <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css" /> <style type="text/css"> #loading-mask{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:20000; background-color:white; } #loading{ position:absolute; left:45%; top:40%; padding:2px; z-index:20001; height:auto; } #loading .loading-indicator{ background:white; color:#444; font:bold 20px tahoma,arial,helvetica; padding:10px; margin:0; height:auto; } #loading-msg { font: normal 18px arial,tahoma,sans-serif; } </style> </head> <body> <!-- 加载效果 --> <div id="loading"> <div class="loading-indicator"> <img src="ext-2.1/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/> <br/><span id="loading-msg">Loading ...</span> </div> </div> <!-- 加载类库 --> <script type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-2.1/ext-all.js"></script> <script type="text/javascript" src="login2.js"></script> <!-- 退去加载效果 --> <script type="text/javascript"> Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}}); </script> <!-- 登陆界面 --> <div id='wins'></div> <!-- --> </body> </html> |
