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