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

• 1、全局設定, 通過直接指定

  $.blockUI.defaults

  對象的值來設定。
• 2、局部設定, 将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/jams742003/

轉載請注明：部落格園