jQuery BlockUI

jQuery BlockUI
2010年2月9日
13:25

Overview
jQuery BlockUI插件让你在不锁定浏览器的情况下使用Ajax时模拟同步行为。当被激活的时候，它会阻
止用户的行为直到它无效。BlockUI将元素添加到DOM中，并赋予外观和阻止用户动作的行为。

用法非常简单：
1、to block user activity for the page：
$.blockUI();
2、blocking with a custom message：
$.blockUI({
message:"A customer message."
});
3、blocking with custom style：
$.blockUI({
css:{
backgroundColor:"",
color:""
}
});
4、to unblock the page：
$.unblockUI();

如果你想使用默认设置和have the UI blocked for all requests：
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

Page Blocking
$.blockUI();
$.blockUI({
message:"<h1>A message.</h1>"
});
$.blockUI({
css:{
backgroundColor:"",
color:""
}
});
$.blockUI({
message:$("#domMessage")
});

Element Blocking
$("div").block({
message:null
});
$("div").block({
message:null,
css:{
border:"1px solid #a00"
}
});
$("div").unblock();

Modal Dislogs

Options
通过在你的代码重写这些来改变默认行为和样式
$.blockUI.defaults={
当blocking时显示的信息，如果使用null则不显示任何信息
message:"<h1>A message.</h1>",

当blocking时信息的样式，如果你想禁用这些并且使用一个外部样式，可以这么做：
$.blockUI.defaults.css={};
css:{
padding:0,
margin:0,
width:"30%",
top:"40%",
left:"35%",
textAlign:"center",
color:"#000",
border:"3px solid #aaa",
backgroundColor:"#fff",
cursor:"wait"
},

覆盖层样式
overlayCss:{
backgroundColor:"#000",
opacity:0.6
},

当使用$.growlUI时应用的样式
growlCSS:{
width:"350px",
top:"10px",
left:"",
right:"10px",
border:"none",
padding:5px,
opacity:0.6,
cursor:null,
color:"#fff",
backgroundColor:"#000",
"-webkit-border-radius":"10px",
"-moz-border-radius":"10px"
},

IE问题："about:blank" fails on HTTPS and javascript:false is s-l-o-w
iframeSrc:/^https/i.test(window.location.href||"")?"javascript:false":"about:blank",

在非IE浏览器中强制使用iframe(handy for blocking applets)
forceIframe:false,

覆盖层的z-index基值
baseZ:1000,

将信息显示在中间，centerX只有在element blocking时才有效，而page blocking是通过CSS来控制的
centerX:true,
centerY:true,

在IE6下允许body元素被拉伸，将会使block看起来更好一些，如果你想禁止改变高度可以将其禁用
allowBodyStretch:true,

block内容的键或鼠标事件将被禁用
bindEvents:true,

默认情况下，blockUI将会抑制tab导航到block的内容之外（在bindEvents为true的情况下）
constrainTabKey:true,

fadeIn时间，单位为毫秒，在block的时候设置为0将会禁用
fadeIn:200

fadeOut时间，单位为毫秒，在unblock的时候设置为0会禁用
fadeOut:400,

在auto-unblocking之前等待的时间，单位为毫秒，设置为0将会禁用auto-unblocking
timeout:0,

如果你不想显示覆盖层可以将其禁用
showOverlay:true,

在page blocking时，如果为true将会把焦点放在第一个可用的输入域中
focusInput:true,

在Firefox/Linux平台上抑制覆盖层样式的使用（由于opacity导致的性能问题）
applyPlatformOpacityRules:true,

当unblocking结束时调用的回调方法，有两个参数被传入：已经被unblocked的元素（page block是window对象）和被传到unblock调用的选项：onUnblock(element,options);
onUnblock:null,

quirksmodeOffsetHack:4
};

改变blockUI的选项相当简单，以下两种方式：
1、直接覆盖$.blockUI.defaults对象：$.blockUI.defaults.css.border="";
2、传一个选项对象到blockUI或block函数中：
$.unblockUI({
message:""
});