以下是用.Net C#程式來作說明

下載處:

jQuery:

blockUI:

讀取中的動態圖片:

首先當然要先將所需的jQuery library寫入頁面中(寫在HTML何處應該不需多說吧)

<script src="script/jquery-1.11.0.min.js"></script>

<script src="script/jquery.blockUI.js"></script>

緊接這下面再加上下列這段script

<script type="text/javascript">
function showBlockUI(){
$.blockUI({
message: '<table><tr><td valign="middle"><img src="images/ajax-loader.gif" /> 處理中,請稍候...</td></tr></table>',
css: {
width: '250px',
height: '50px'
}
});
}
</script>

這段script就是讀取中的畫面設計,這可依據頁面需求自行修改

再來就是將用來呼叫後端執行程式的控制項也加上呼叫showBlockUI這個函示

<asp:Button runat="server" CssClass="main"
Text="Search" OnClientClick="showBlockUI();" />

經過這樣的修改就已經可以執行了

其執行結果如下圖

如果你的頁面設計是採用整頁Postback的方式

那到這邊就算是大功告成了

資料顯示出來,blockUI也會跟著消失

但如果是採用非同步的設計那就要在後段程式加入unblockUI的script

否則就算資料跑出來的,上圖的處理中還是會一直繼續跑不停

結果就被卡死什麼事也不能做了...

後端在程式執行結束後加入

ScriptManager.RegisterStartupScript(Page,Page.GetType(), "unblockUI", "$.unblockUI();", true);

就可以完工囉!