ext loading效果

最新推荐文章于 2019-01-21 22:20:00 发布

iteye_8728

最新推荐文章于 2019-01-21 22:20:00 发布

阅读量298

点赞数

分类专栏： javascript 文章标签： EXT JSP HTML

本文链接：https://blog.csdn.net/iteye_8728/article/details/81684370

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<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>