加载数据之前的加载等待中效果

eg1.

效果图：



jsp:

<div id="reportDiv" style="width: 98%; margin: 10px auto;"><div></div></div>

<div id="wait" style="width: 98%; margin: 10px auto;display:true;padding-top:45px;" align="center"><span style="color:black;font-weight:bold;">加载中，请稍后...</span><br/><img src="../../style/image/Loading.gif"
style="width:100px;hight:20px;"/></div>

js:

/**

* 查询报表

* @return {Boolean}

*/

function query(){

var tm = $("#date").val();

var stcd = $("#stationId").val();

var stnm = $("#stationId").find("option:selected").text();

var itemId = $("#stationType").val();

var data = {

stcd:stcd,

tm : tm,

stnm:stnm

};

var url = "";

if (itemId == "PP") {

url = appPath + "/raindayreport.do";

}

else if (itemId == "ZZ") {

url = appPath + "/waterdayreport.do";

} else if (itemId == "BB") {

url = appPath + "/evapdayreport.do";

} else if (itemId == "TP") {

url = appPath + "/tempdayreport.do";

} else if (itemId == "RZ") {

url = appPath + "/leveldayreport.do";

data.trans_id = $("#trans_id").val();

data.trans_name = $("#trans_id").find("option:selected").text();

} else if (itemId == "WF") {

url = appPath + "/flowdayreport.do";

} else {

return;

}

$.ajax({

url : url,

data : data,

beforesend:function(){

$("#wait").attr("style","display:show();");

},

type : "post",

dataType : "text",

success : function(result) {

$("#wait").attr("style","display:none;");

$("#reportDiv").html(result);

}

});

}

加载的动态图片：



欢迎各位童鞋下载！

eg2.



<div style="margin-top:20px;padding:3px 0 3px 3px;overflow:hidden;"><h2 id="newalarm_titile" style="display:inline;">最近发布的预警信号</h2><span style="padding-left:230px;"><select id="year" onchange="chgMonth(this);"></select>
　<select id="month"></select> <input type="button" onclick="return query();" value="查询历史预警信号" /></span></div>

<table style="width:677px;" border="0" cellspacing="0" cellpadding="0" id="new_alarm" >

<tr>

<th width="536" scope="col">内容</th>

<th width="141" id="alarm_date" scope="col">发布时间</th>

</tr>

<tbody id="alarm_content_list">

<tr><td colspan='2'>数据加载中...</td></tr>//数据加载中

</tbody>

</table>

</div>

createScript(DATA_PATH + "szWeather/alarm/szAlarmHistory.js?"+Math.random(),initRecentAlarm);

function initRecentAlarm()

{

if(typeof SZ121_szAlarmHistory=='undefined') return;

$("#alarm_content_list").html('');//清空tbody里的内容

$("#alarm_content_list").setTemplate("{#foreach $T as record}<tr><td>{$T.record.signaltxt}</td><td>{$T.record.recdate}</td></tr>{#/for}");//向tbody里加入新的内容

$("#alarm_content_list").processTemplate(SZ121_szAlarmHistory);

}

相关文章可以参考：http://my.csdn.net/my/mycsdn?c=1817956f829c660357743d0591725252

以及：http://www.makaidong.com/博客园文/35450.shtml