BlockUI完全指导手册

 

BlockUI可以显示一个全屏的遮罩，并显示提示信息。BlockUI主要使用blockUI和unblockUI的锁定和解锁屏幕。BlockUI允许你使用AJAX的方法锁定屏幕，而不需要锁定整个浏览器。

 

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

 

版本：V2

 

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

 

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

 

（1） blockUI方法的使用

 

使用方法

 

$.blockUI(opts);

 可以把屏幕锁住。

 

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

 

1. message属性：

 

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

 

 

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

  

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

 

message可以是任意的HTML文本。

 

2. css 样式

 

此外，锁定屏幕时，显示的内容的CSS我们也可以自定义：

 

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

  

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

 

css包括的属性有：

 

padding：间距

margin：空白

width：信息的宽度

top：顶部距离

left：左边距离

textAlign：文字对齐方式

color：字体颜色

border：边框的样式

backgroundColor：背景颜色

 

3. overlayCSS   遮罩层的样式

 

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

 

backgroundColor：背景颜色

opacity：透明度

cursor：鼠标形式

 

4. fadeOut 消失时间

 

 

 

 

 

 

（2）unblockUI 取消屏幕锁定

 

使用

$.unblockUI();

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

 

(3) 其他使用

 

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

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