[jQuery] BlockUI Plugin - 功能完善的頁面、訊息遮罩 jQuery, BlockUI

wmh

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 的官方首頁，還可以看到簡易處理表單的例子，以及完整的參數、選項等等。

wmh

jquery-1.2.3.pack.js 是 jQuery 的 js 檔，目前最新版本是 v1.3.2，你可以從 jQuery 官方網站下載，或是考慮直接引用 Google AJAX Libraries API，使用方法可參考：
http://jsgears.com/thread-79-1-1.html

jquery.blockUI.js 就是本文所介紹的 jQuery plugin，請直接到該網頁下載：
http://www.malsup.com/jquery/block/

wmh

這些程式都是跑在 client 端的，和 server 端不太有關係，除非 server 端無法正確送出正確的程式碼。

你說的一閃一閃是哪一部份在閃呢？

wmh

我看起來還好耶，你說得一閃一閃的是在顯示小視窗時，背景色在做漸變時一閃一閃的嗎？

wmh

官方的應該也有，只是官方網頁的背景比較灰一點，比較沒感覺。

如果要避免的話，你可以在執行第二次 blockUI 時取消 fadeIn 即可：

$.blockUI({ message: "<h1>資料傳送中....</h1>", fadeIn: 0});