jQuery BlockUI

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:""

});