基于jQuery的显示数据加载中......

项目已经快做完了，现在项目中要添加一个数据加载的显示效果(不用显示进度，只是一个动画提示之类的)，因为项目中目前已经有使用jQuery，所以考虑基于jQuery来实现，其实和jQuery关联也不大。
思路如下:
 因为项目中大多jsp都包含了一个jsp_head.jsp，所以考虑在jsp_head.jsp中做手脚，这样可以省去很多工作量。
 1、 在jsp_head.jsp中定义一个div（主要显示数据加载的动态效果，比如图片），设置style="display:none"；
 2、 利用jQuery为所有的button和submit按钮添加click事件（用来显示div）:
    当然这里事件定义的范围可能比较广，如果不需要的话可以由选择性的定义事件，比如为按钮定义指定样式或ID，以便jQuery能够选择到它。

jsp_head.jsp中代码如下：
  <div id="dataLoad" style="display:none"><!--页面载入显示-->
   <table width=100% height=100% border=0 align=center valign=middle>
    <tr height=50%><td align=center>&nbsp;</td></tr>
    <tr><td align=center><img src="<%=request.getContextPath()%>/XXXXX/loading-gif.gif"/></td></tr>
    <tr><td align=center>数据载入中，请稍后......</td></tr>
    <tr height=50%><td align=center>&nbsp;</td></tr>
   </table>
  </div>
  <script type="text/javascript">
   $(document).ready(function() {
    $("#dataLoad").hide(); //页面加载完毕后即将DIV隐藏
    $("#showLoadingDiv").click(function(){$("#dataLoad").show();}); //为指定按钮添加数据加载动态显示：即将DIV显示出来
   });
  </script>
  
其他jsp中的代码大致如下：

......
<%@ include file="/jsp/jsp_head.jsp"%>
......
<input type="button" onClick="query();" id="showLoadingDiv" value="查询"> 
......

这种实现对用户来说是非常真实的，没有高的技术要求，希望这种思路对你的项目有所帮助。

posted on 2010-08-12 10:16 心砚 阅读(6134) 评论(5)  编辑  收藏 所属分类: Java