JQuery中遮罩層blockUI插件的用法

實例訪問地址： http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html

這個插件的用法很簡單。阻止用戶與頁面交互：

$.blockUI();

自定義提示信息：

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

自定義顯示樣式：

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

解除對頁面的鎖定：

$.unblockUI();

如果要使用默認設置來同步所有的AJAX請求動作，代碼如下：

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

[1] 以同步傳輸的方式來使用XMLHttpRequest對象會在請求結束前阻止用戶與瀏覽器的交互，直到請求結束。通常情況下，這不是一種好的用戶體驗。

   遮罩層插件實例 

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種方式：

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