基于jQuery的顯示數(shù)據(jù)加載中......

項(xiàng)目已經(jīng)快做完了，現(xiàn)在項(xiàng)目中要添加一個(gè)數(shù)據(jù)加載的顯示效果(不用顯示進(jìn)度，只是一個(gè)動(dòng)畫提示之類的)，因?yàn)轫?xiàng)目中目前已經(jīng)有使用jQuery，所以考慮基于jQuery來(lái)實(shí)現(xiàn)，其實(shí)和jQuery關(guān)聯(lián)也不大。
思路如下:
?因?yàn)轫?xiàng)目中大多jsp都包含了一個(gè)jsp_head.jsp，所以考慮在jsp_head.jsp中做手腳，這樣可以省去很多工作量。
?1、 在jsp_head.jsp中定義一個(gè)div（主要顯示數(shù)據(jù)加載的動(dòng)態(tài)效果，比如圖片），設(shè)置style="display:none"；
?2、 利用jQuery為所有的button和submit按鈕添加click事件（用來(lái)顯示div）:
????當(dāng)然這里事件定義的范圍可能比較廣，如果不需要的話可以由選擇性的定義事件，比如為按鈕定義指定樣式或ID，以便jQuery能夠選擇到它。

jsp_head.jsp中代碼如下：
??<div id="dataLoad" style="display:none"><!--頁(yè)面載入顯示-->
???<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>數(shù)據(jù)載入中，請(qǐng)稍后......</td></tr>
????<tr height=50%><td align=center>&nbsp;</td></tr>
???</table>
??</div>
??<script type="text/javascript">
???$(document).ready(function() {
????$("#dataLoad").hide();?//頁(yè)面加載完畢后即將DIV隱藏
????$("#showLoadingDiv").click(function(){$("#dataLoad").show();}); //為指定按鈕添加數(shù)據(jù)加載動(dòng)態(tài)顯示：即將DIV顯示出來(lái)
???});
??</script>
??
其他jsp中的代碼大致如下：

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

這種實(shí)現(xiàn)對(duì)用戶來(lái)說(shuō)是非常真實(shí)的，沒有高的技術(shù)要求，希望這種思路對(duì)你的項(xiàng)目有所幫助。

posted on 2010-08-12 10:16 心硯 閱讀(6158) 評(píng)論(5)  編輯  收藏 所屬分類: Java