基于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 心硯 閱讀(6161) 評論(5)  編輯  收藏 所屬分類: Java