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);

 

你可能感兴趣的:(block)