jQuery BlockUI

Overview

jQuery BlockUI插件让你在不锁定浏览器的情况下使用Ajax模拟同步行为。当被激活的时候,它会阻

止用户的行为直到它无效。BlockUI将元素添加到DOM中,并赋予外观和阻止用户动作的行为。

 

用法非常简单:

1to block user activity for the page

$.blockUI();

2blocking with a custom message

$.blockUI({

message:"A customer message."

});

3blocking with custom style

$.blockUI({

css:{

backgroundColor:"",

color:""

}

});

4to 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的内容之外(在bindEventstrue的情况下)

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 blockwindow对象)和被传到unblock调用的选项:onUnblock(element,options);

onUnblock:null,

 

quirksmodeOffsetHack:4

};

 

改变blockUI的选项相当简单,以下两种方式:

1、直接覆盖$.blockUI.defaults对象:$.blockUI.defaults.css.border="";

2、传一个选项对象到blockUIblock函数中:

$.unblockUI({

message:""

});

posted @ 2011-07-19 16:56  俗雅冰山  阅读(1699)  评论(0编辑  收藏  举报