jQuery插件 blockUI

BlockUI 插件是用於進行AJAX操做時模擬同步傳輸時鎖定瀏覽器操做。當它被激活時，它會阻止使用者與頁面（或頁面的一部分）進行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法來實現阻止用戶與瀏覽器交互的外觀和行爲。

這個插件的用法很簡單。

1 阻止用戶與頁面交互：

$.blockUI();

2 自定義提示信息：

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

3 自定義顯示樣式：

$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

4 解除對頁面的鎖定：

$.unblockUI();

5 若是要使用默認設置來同步全部的AJAX請求動做，代碼以下：

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

----------------------------------------------------------------------------------
BlockUI的默認選項設置以下：

// 能夠使用如下代碼來自定義行爲和樣式 $.blockUI.defaults = { 	//鎖定時顯示的提示信息(無提示信息時設置爲null)     message:  '<h1>Please wait...</h1>',          // 能夠用CSS來格式化鎖定時顯示的信息     // 若是你但願使用一個外部樣式表，請使用一下代碼     // $.blockUI.defaults.css = {};     css: {          padding:        0,         margin:         0,         width:          '30%',          top:            '40%',          left:           '35%',          textAlign:      'center',          color:          '#000',          border:         '3px solid #aaa',         backgroundColor:'#fff'     },          // 設置遮罩層的樣式     overlayCSS:  {          backgroundColor:'#000',          opacity:        '0.6'      },          // 容許在ie6中縮放body元素。這會使較短的頁面看上去好一些     // 若是你不想body元素的高度被改變，請設置爲disable     allowBodyStretch: true,          // 默認狀況下blockUI會禁止tab導航     constrainTabKey: true,          // fadeOut時間單位爲毫秒。設爲0的話，在解除鎖定時不使用fadeout效果。      fadeOut:  400,          // 禁止在FF/Linux上使用遮罩層樣式(因爲透明度的性能問題)     applyPlatformOpacityRules: 1 };

改變blockUI的設置很是簡單，有2種方式：

• 一、全局設置, 經過直接指定$.blockUI.defaults對象的值來設置。
• 二、局部設置, 將options對象放到 blockUI (或 block) 函數內部。

全局設置

你能夠經過直接的賦值來改變默認的選項。例如：

// 改變提示信息的邊框 $.blockUI.defaults.css.border = '5px solid red';  // 縮短fadeOut效果的時間 $.blockUI.defaults.fadeOut = 200;

局部設置

局部設置是將options對象放到 blockUI (或 block) 函數內部。這會強制使用局部設置來代替全局設置的值。例如:

// 改變提示信息的邊框 $.blockUI({ css: { border = '5px solid red'} });  ...  // 縮短fadeOut效果的時間 $.blockUI({ fadeOut: 200 });  ...  // 使用一個不一樣的提示信息 $.blockUI({ message: 'Hold on!' });

原文轉自：http://www.cnblogs.com/kiter/archive/2012/02/23/2365251.html