Struts2系统执行进度条(Kevinb原创)资源-CSDN文库

2星需积分: 7 180 浏览量 2009-09-22 10:32:07 上传评论 1 收藏 3KB TXT 举报

### Struts2系统执行进度条实现详解 #### 一、背景与目的在现代Web应用程序开发过程中，用户体验一直是开发者关注的重点之一。对于那些处理时间较长的操作（如数据导出、批量处理等），如何给予用户良好的反馈显得尤为重要。进度条作为一种直观的用户反馈机制，在提升用户体验方面扮演着不可或缺的角色。本文将详细介绍一种基于Struts2框架实现的进度条方案，通过简单的配置即可实现在后台执行耗时操作时展示一个等待遮罩，告知用户系统正在进行处理。 #### 二、技术原理 ##### 1. HTML/CSS结构设计在Struts2项目中，实现进度条的关键在于HTML和CSS的设计。首先需要定义一个`div`元素作为等待遮罩，该元素应覆盖整个屏幕，并设置一定的透明度以确保底层页面内容仍然可见但不可交互。 ```html <div id="Loading" style="position:absolute;z-index:3;top:0px;left:0px;width:100%;height:100%;border-width:1;border-style:ridge;background-color:#8E8E8E;padding-top:10px;filter:alpha(opacity=50);"> <center> <table width="100%" height="100%"> <tr> <td style="border-color:transparent;" class="tdWait"> <table style="background-color:white;"> <tr> <td valign="middle" style="border-color:transparent;"> <s:if test="%{#session.userPathS==null}"> <img src="image/nec/blue/loading.gif" border="0"> </s:if> <s:else> <img src="image/${userPathS}/${stylePathS}/loading.gif" border="0"> </s:else> </td> </tr> </table> </td> </tr> </table> </center> </div> ``` 上述代码展示了等待遮罩的基本结构，其中包含了一个居中的加载动画，动画图片根据用户的特定路径进行加载。 ##### 2. JavaScript控制显示逻辑为了使等待遮罩能够在需要的时候出现并消失，我们需要编写JavaScript代码来控制其显示状态。这里我们定义了一个名为`waitLoad`的函数，该函数接收一个参数`ifLoad`，用于指示是否需要显示等待遮罩。 ```javascript /** * 控制进度条的显示或隐藏 * @param ifLoad 显示或隐藏标志位 */ function waitLoad(ifLoad) { if (ifLoad == 0) { document.all['Loading'].style.display = 'block'; // 显示 } else { document.all['Loading'].style.display = 'none'; // 隐藏 } } ``` ##### 3. 集成到项目中为了方便使用，我们可以将上述代码整合进项目的公共部分，例如将等待遮罩页面保存为`systemWait.jsp`，将JS代码保存为`common.js`。 1. **引入JS文件**：在HTML头部标签中引入`common.js`。 ```html <head> <script type="text/javascript" src="js/common.js"></script> </head> ``` 2. **集成等待遮罩页面**：在需要的地方引入`systemWait.jsp`。 ```html <jsp:include page="../../system/systemWait.jsp" /> ``` 3. **初始化显示状态**：在`<body>`标签中通过`onload`属性调用`waitLoad`函数以默认隐藏等待遮罩。 ```html <body onload="waitLoad(1);"> ``` 4. **在业务逻辑中调用**：当需要显示等待遮罩时，通过调用`waitLoad(0)`实现。 ```javascript function f_getInfo(matriId) { // 示例业务逻辑 // 显示等待遮罩 waitLoad(0); window.location = "recruitment/tbRmMatriculate!getMatriByMatriId.action?matriId=" + matriId + "&nowPage=<%=nowPage%>&ifInput=<%=ifInput%>"; } ``` #### 三、应用场景与效果该进度条方案适用于任何需要长时间处理数据的场景，比如数据导入导出、后台计算等。通过简单地在业务逻辑中加入几行代码，就可以在后台处理数据的同时，向用户展示一个等待遮罩，从而有效提升用户体验。同时，该方案的实现方式简单明了，易于理解和维护。通过本文介绍的方法，可以快速实现一个功能完善的进度条组件，不仅能够增强系统的可用性，还能显著提升用户体验。

资源推荐

资源详情

资源评论

-------------==============Stuts2系统进度条(Kevinb 原创)==============-------------

18.制作系统等待页面
18.0 原理
在系统页面中添加一个遮蔽层div，div的主要内容是一个等待页面；在需要执行业务的时候手动打开这个遮蔽层即可，业务转向会有两种可能性，在本页面，去别的页面；
如果在本页面，完成业务系统肯定会执行<body onload="waitLoad(1);">onload事件，关闭遮蔽层，这是业务已经完成；如果去别的页面在处理业务的时候在本页面手动打开
了遮蔽层，一旦开始转向，系统自动关闭遮蔽层。

18.1 制作systemWait.jsp存放遮蔽层
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<div id="Loading"
style="position: absolute; z-index: 3; top: 0px; left: 0px; width: 100%; height: 100%; border-width: 1; border-style: ridge; background-color: #8E8E8E; padding-top: 10px;filter:alpha(opacity=50);">
<center>
<table width="100%" height="100%">
<tr>
<td style="border-color: transparent;" class="tdWait">
<table style="background-color: white;">
<tr>
<td valign="middle" style="border-color: transparent;">
<s:if test="%{#session.userPathS == null}">
<img src="image/nec/blue/loading.gif"
border="0" >
</s:if>
<s:else>
<img src="image/${userPathS}/${stylePathS }/loading.gif"
border="0" >
</s:else>
</td>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈