<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>
分享到：
相关推荐
ExtJS的loading效果是指当数据正在后台加载或页面正在处理时，显示的一种视觉提示，告知用户系统正在进行工作。这通常是一个旋转的指示器或文字提示，如“正在加载...”。这种效果可以避免用户在等待过程中感到迷茫...
本文将深入探讨“js写的加载效果，模仿Ext的效果”这一主题，包括JavaScript的基本概念、加载效果的原理以及如何实现类似Ext JS的加载动画。 首先，JavaScript是Web开发中的关键组成部分，它使得网页变得动态且交互...
`Ext.MessageBox`还支持添加动画效果，例如： **示例代码：** ```javascript var config = { title: "fly", msg: "I can fly", width: 300, multiline: true, closable: false, buttons: Ext.MessageBox....
任何jsp页面只要使用包含附件中的loading.jsp将自动拥有...类似于yui-ext的效果。 4。跨平台。在IE6和firefox2.0.03下测试成功。new~（在2.0里提供） 5。低侵入性。不会影响包含这个组件的页面，对其他方法的调用。
EXT是一个强大的前端框架，主要用于构建桌面级的Web应用程序，提供丰富的用户界面组件和交互效果。EXT聊天程序可能利用EXT的组件模型，如Grid、Panel、Form等，来实现聊天窗口、联系人列表、消息发送等功能。 EXT库...
- 在大型数据集情况下，可以使用异步加载（lazy loading）来提高性能，只在需要时加载节点的子节点。 7. **树的遍历**： - 通过`node遍历API`如`node.eachChild()`、`node.traverse()`等，可以对树进行深度优先或...
- `Ext.Fx.chain(effects)`: 链接多个动画效果。 #### 16. Ext.KeyNav 类 (P.19) - **概述**：提供了键盘导航功能。 - **常用方法**： - `Ext.KeyNav.init(element, config)`: 初始化键盘导航。 - `Ext.KeyNav....
- 实现动态加载效果，提高用户体验。 - 在调用服务器端方法之前显示LOADING提示，在请求完成后隐藏。 2. **实时通讯功能**： - 实现客户端与服务器之间的双向通信。 - 例如，服务器端可以推送消息给客户端，...
对于包含大量数据的标签页，可以使用懒加载（Lazy Loading）策略，只有在用户切换到特定标签时才加载其内容，从而提高应用的启动速度和响应性。 综上所述，"ExtJS效果Tabs形式"涵盖了创建、配置、操作以及美化...
通过调整这些CSS类的字体大小，可以有效地改善EXT.NET组件在IE9中的显示效果，提升用户的浏览体验。不过，需要注意的是，实际应用中可能还需要根据具体页面布局和设计进行微调，确保整体界面的一致性和美观性。
此外，如果要添加动画效果，可以创建一个单独的anim文件夹，在其中放置旋转动画的XML文件。例如，`dialog_anim`可能包含了加载等待动画的资源。在Dialog中通过AnimationDrawable或ObjectAnimator来启动这个动画。 ...
ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...
- **示例**: 使用 `Ext.Fx` 和 `Ext.Element` 类中的动画函数实现动态效果。 #### 五、元素操作与模板 **5.1 元素操作** - **工具**: `Ext.DomHelper` 类提供了创建、操作 DOM 元素的方法。 - **示例**: `Ext....
如果要创建圆形进度条，可以使用`Ext.ProgressBarWidget`，并调整其样式以呈现圆形效果。此外，还可以通过动画效果增强用户体验，例如设置进度条动态更新的速度。 在提供的“ExtJs实现进度条实例.htm”文件中，可能...
在ExtJS 3中，虽然没有像ExtJS 4那样内置的动态加载机制，但可以通过自定义实现来达到类似的效果。"Extjs3动态加载js源码"描述的应该是一个开发者为ExtJS 3定制的动态加载管理器。这个管理器允许在运行时根据需要...
而设置为 `false` 时，则取消圆角效果以及背景色。 - 示例代码： ```javascript var panel = new Ext.Panel({ title: '示例面板', frame: true // 设置圆角边框和背景色 }); ``` 2. **xtype**： - 类型：...
- **LOADING 界面创建**：为了提升用户体验，在 AJAX 请求期间可以显示加载提示，DWR 支持自定义这些加载效果。 - **线交流功能**：DWR 提供了双向通信的能力，不仅支持客户端向服务器发起请求，还支持服务器主动向...