[jQuery]外掛特輯15:BlockUI-區塊遮蔽讓使用者不再看到不該看的

Block UI是一個相當古老的jQuery外掛，它幾乎就和另外一個叫做Thickbox的jQuery外掛一樣的古老，這是一個產生燈箱(lightbox)效果的外掛。雖然這些外掛都很古老，但卻也相當的完整，實在不可以小覷阿！像本文所介紹的BlockUI就是在使用者介面的遮蔽上首屈一指的外掛。


那麼為什麼要用BlockUI遮蔽使用者介面呢？最主要有兩個功用：

(1)當資料載入或儲存時，遮蔽畫面，禁止使用者連續進行操作，例如:猛點add或save這種事＝="

(2)這是一個很微妙的人性問題，當使用者在瀏覽網頁的時候，如果畫面上有越多的選擇時，使用者越會無所適從，越會需要費心去尋找牠們所要使用的功能，這個時候還不如直接一點，就由我們來貼心的幫他把不需要看到的東西遮住。

• 外掛名稱：BlockUI
• 作者網站：http://malsup.com/jquery/block/#overview
• 範例演示：http://malsup.com/jquery/block/

事實上，blockUI的功能跟jQuery UI的dialog十分類似，兩者之間最主要的差異應該是blockUI可以遮蔽單一個某個容器物件，像是div。因此，我會在需要遮蔽某些固定區塊時，選擇使用blockUI。以下是簡單的程式碼：

$('#blockButton2').click(function() { 
            $('div.test').block({ 
                message: '<h1>Processing</h1>', 
                css: { border: '3px solid #a00' } 
            }); 
        }); 

透過blockUI指定你想遮蔽的DOM物件，上面程式碼指定了一個div，並設定當blockUI啟動的時候，會遮蔽此Div並依照設定顯示message。

如果覺得本文對您有幫助，歡迎訂閱悶騷男的RSS