BlockUI完全指导手册

 

BlockUI让你可以在使用AJAX时，可以显示一个全屏的遮罩，从而阻止用户进行其他的操作。并显示提示信息。BlockUI主要使用blockUI和unblockUI的锁定和解锁屏幕。BlockUI允许你使用AJAX的方法锁定屏幕，而不需要锁定整个浏览器。

 

框架主页：http://malsup.com/jquery/block/

 

版本：V2

 

适用于jquery1.2.3以上的版本。

 

主要的两个入口函数：blockUI和unblockUI。

 

（1） blockUI方法的使用

 

使用方法非常简单，使用

 

$.blockUI();

 可以把屏幕锁住。

 

 通过参数的传递，你可以实现更多的锁定效果

 

$.blockUI(opts);

 

 

opts包括的自定义属性包括：

 

1. message属性：

 

使用message属性，我们可以自定义锁定屏幕时的信息。比如：

 

 

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

  

此时锁定屏幕时，会显示一个图片和一个Just a moment的文字。

 

message可以是任意的HTML文本，也可以是Dom对象，也可以是jQuery对象。

 

2. css 属性

 

内容区域的样式

 

例如：

 

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

  

这样显示的文字的背景为红色，颜色为白色。

 

css包括的属性有：

 

padding：间距

margin：空白

width：信息的宽度

top：顶部距离

left：左边距离

textAlign：文字对齐方式

color：字体颜色

border：边框的样式

backgroundColor：背景颜色

cursor:鼠标类型

 

3. overlayCSS   遮罩层的样式

 

可以自定义底部遮罩层的样式，包括：

 

backgroundColor：背景颜色

opacity：透明度

cursor：鼠标形式

 

4. fadeOut 消失时间

 

这个属性只有定义了自动消失才有效，遮罩消失的时间

 

5. fadeIn 显现动画效果的时间

 

为零时，没有动画效果

 

（2）unblockUI 取消屏幕锁定

 

使用

$.unblockUI();

 就可以把屏幕锁定取消了。 

 

使用：

 

$.unBlockUI(opt)

 可以自定义消失的效果

 

(3) 其他使用

 

如果要使用默认设置来同步所有的AJAX请求动作，代码如下：

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