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) 函数内部。