当前位置: 首页 > 工具软件 > blockUI > 使用案例 >

BlockUI完全指导手册

许子平
2023-12-01

 

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

 

 类似资料: