jQuery BlockUI Plugin
http://www.malsup.com/jquery/block/
jQuery 必備的 Plugin 之一,讓你輕輕鬆鬆做出頁面遮罩的特效
範例一:全頁遮罩
先來個全頁的訊息遮罩吧:
使用相當簡單,首先引用 jQuery 和 BlockUI:
<input type="button" value="全頁遮罩" id="demo1" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
JavaScript 的部份我們直接看重點:
$.blockUI({ message: '<div>歡迎來到 jsGears.com !</div>'});
就這麼簡單,你可以把 $.blockUI() 綁定在特定的事件,例如按下按鈕的時候,或者向 Server 端發出 HttpRequest 之前。當你要把遮罩取消時,也只需要簡單的一行:
$.unblockUI();
這樣就取消了遮罩,並且將滑鼠游標恢復正常。
範例二:區塊遮罩
除了整頁的遮罩,BlockUI 也可以很容易做到部份區塊的遮罩,例如這個範例是把目前這一塊文章的內文部份遮住:
和全頁遮罩最大的不同是,先以 jQuery 選取你要遮住的元素後,再用 block() 或 unblock() 處理,Function 名稱不太一樣喔,記得不要搞混了。直接看重點:
$('.postmessage:first').block({ message: null });
首先是用 jQuery 選取了 class 名稱為 postmessage 的第一個元素,然後 block(),這時帶入的參數是 message: null,表示這次不顯示任何訊息。相對的 unblock 用法如下,非常的簡單:
$('.postmessage:first').unblock();
範例三:更新遮罩內容
當遮罩內的訊息需要更新的話,也非常簡單,只需要再 block 一次就可以啦,記得不用先 unblock 再 block 喔,否則畫面閃啊閃的可不好看:
程式碼如下:
$("#demo3").click(function() {
var countdown = 3;
$.blockUI({ message: '3' });
var interval = setInterval(function() {
if (--countdown <= 0) {
$.unblockUI();
clearInterval(interval);
} else {
$.blockUI({ message: countdown });
}
}, 1000);
});
更多的範例
就在 BlockUI 的官方首頁,還可以看到簡易處理表單的例子,以及完整的參數、選項等等。 |