Jquery中BlockUI的詳解

 

BlockUI外掛程式需要那個jQuery版本的支援？
BlockUI相容jQuery v1.2.3以上的版本
 

BlockUI外掛程式的V2版本有那些變化？
解除鎖定的時候，用於提示資訊的元素不會從DOM中移除
預設的遮罩層為黑色
可用的選項設定進行了統一和清理
設定外掛程式選項的方法改變了
放棄了對Opera 8的支援
提高了原始碼的可讀性
移除了displayBox功能 (其他 plugins會做的更好)
 

我的原代碼中的blockUI外掛程式與新的2.00版相容嗎？
不相容，如果原代碼改變了blockUI的預設屬性，那麼會出現相容問題。如何設定選項的文法發生了細微的改變。請查看Options頁來瞭解新版本的選項設定方法。
 

BlockUI外掛程式還依賴於其他的外掛程式嗎？
不依賴
 

我如何使用外部樣式表來格式化提示資訊？
請查看 demo頁.
 

我可以改變頁面鎖定時預設的提示資訊嗎？
 
可以。預設的提示資訊儲存在$.blockUI.defaults.message中。你可以以一個新的值來替換它，例如：
$.blockUI.defaults.message = "Please be patient...";

 

我能夠改變遮罩層的顏色和透明度嗎？

可以。預設的遮罩層樣式儲存在 $.blockUI.defaults.overlayCSS中。你可以指定一個不同的顏色和透明度，

例如
// 使用黃色遮罩層
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
// 使遮罩層更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';

 

BlockUI支援Opera 8嗎？
不支援
 
在linux的FF上我為什麼看不到遮罩層？

有幾個人告訴我，在FF/Linux上整個頁面的透明度渲染慢的讓人發瘋，所以預設情況下，在這些平台上遮罩層不透明。你可以重設applyPlatformOpacityRules值來啟用透明度。例如:

// 在FF/Linux下啟用遮罩層透明$.blockUI.defaults.applyPlatformOpacityRules = false;

 

BlockUI基本使用
      // 當有ajax請求時，當載入資訊較慢時，會顯示該等待資訊，帶來良好的使用者體驗
        $(document).ajaxStart(function () {
            $.blockUI({

                // $.blockUI.defaults.message = "請稍候";(不寫在$.blockUI({})裡，寫在外面)
                message: '<span style="font-size:13px;font-weight:bolder">請稍候</span>',

              

                // 指的是提示框的css
                css: {
                    width: "45px",   // 寬度小一點
                    top: "50%",
                    left: "50%"
                },

              

                // 遮光罩的css
                // 等價$.blockUI.defaults.overlayCSS.backgroundColor = "#E4E7EC";
                overlayCSS: {
                    backgroundColor: "yellow",
                    opacity:"0.8"
                }
            });
        });

 

下載
新版本的blockUI v2.00可以在這裡得到: jquery.blockUI.js.

舊版本的blockUI仍然可以在這裡得到：
http://jqueryjs.googlecode.com/svn/trunk/plugins/blockUI/jquery.blockUI.js. 舊版本的文檔在這裡.

 

原帖地址：http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html