[程式筆記][jQuery]顯示loading畫面

因為程式有時候在查詢時要防止使用者點選，或是使用者要知道現在正在進行(查詢)作業，這時候就需要顯示loading畫面。這裡分別說明流程：

1、先加min.js與jquery.blockUI.js這兩個js檔，如果是網址的例子要自己修改，例如下面的例子：

<script src=”../Scripts/jquery-1.8.2.min.js”></script>
<script src=”../Scripts/jquery.blockUI.js”></script>

相關js可以到以下網站下載：
http://jquery.com/download/
http://jquery.malsup.com/block/#download

2、在javascript標簽加入下面的程式碼：

<script type="text/javascript">

function waitUI() {

			$.blockUI({

				message: '處理中,請稍候..',

				css: {

					height: '50px'

				}

			});

			alert("程式執行中");//主程式，這裡用alert代替

			setTimeout($.unblockUI, 150);

		}

</script>

3、在下面的按鈕標籤加上onclick=”waitUI()”，以下是例子：<br/>
<onclick=”waitUI()” input name=”Submit” type=”button” id=”btnWait1″ value=”測試1″ /><br/>
<a href=’#’ onclick=’waitUI()’>測試2</a><br/>

4、測試&修改&相關說明
上面的程式，$.blockUI是蔽屏與顯示螢幕訊息，而$.unblockUI是解開蔽屏。
例如上述程式的setTimeout($.unblockUI, 150);這一行可以延遲1.5秒後解開蔽屏，可以用這個檢查是否程式真的有成功執行。
成功的話以下圖為例，有些例子會在blockUI加圖片之類的花樣，這裡為最基本的樣式如下：