Overview
jQuery BlockUI 插件可以在不同锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会组织用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。
使用jQuery BlockUI，首先需要在jQuery后面引用jquery.blockUI.js
jquery.blockUI.js插件下载地址：/block/
用法很简单，组织用户对页面的交互：
$.blockUI();
使用自定义信息阻塞UI
$.blockUI({message:'<h1><imgsrc="busy.gif"/>Justamoment...</h1>'});
使用自定义样式阻塞UI
$.blockUI({css:{backgroundColor:'#f00',color:'#fff'}});
解除对页面的遮罩
$.unblockUI();
如果你先要使用缺省设置对所有的ajax请求都使用UI遮罩，只需要添加下面语句即可
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);使用例子:
页面遮罩示例：
This page demonstrates several ways to block the page. Each button below activates blockUI and then makes a remote call to the server.
The following code is used on this page:
<scripttype="text/javascript">//unblockwhenajaxactivitystops$(document).ajaxStop($.unblockUI);functiontest(){$.ajax({url:'wait.php',cache:false});}$(document).ready(function(){$('#pageDemo1').click(function(){$.blockUI();test();});$('#pageDemo2').click(function(){$.blockUI({message:'<h1><imgsrc="busy.gif"/>Justamoment...</h1>'});test();});$('#pageDemo3').click(function(){$.blockUI({css:{backgroundColor:'#f00',color:'#fff'}});test();});$('#pageDemo4').click(function(){$.blockUI({message:$('#domMessage')});test();});});</script>...<divid="domMessage"style="display:none;"><h1>Weareprocessingyourrequest.Pleasebepatient.</h1></div>
页面元素遮罩示例：
This page demonstrates how to block selected elements on the page rather than the entire page. The buttons below will block/unblock access to the bordered area beneath them.
Test link - click me!
Option 1Option 2lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit ametOption 1Option 2lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leoTest link - click me!lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet
This text will not be blocked.Test link - click me!
The following code is used on this page:
<scripttype="text/javascript">$(document).ready(function(){$('#blockButton').click(function(){$('div.test').block({message:null});});$('#blockButton2').click(function(){$('div.test').block({message:'<h1>Processing</h1>',css:{border:'3pxsolid#a00'}});});$('#unblockButton').click(function(){$('div.test').unblock();});$('a.test').click(function(){alert('linkclicked');returnfalse;});});</script>
简单模态框示例：
This page demonstrates how to display a simple modal dialog. The button below will invokeblockUIwith a custom message. Depending upon the user response (yes or no) an ajax call will be made while keeping the UI blocked.
The following code is used on this page:
<scripttype="text/javascript">$(document).ready(function(){$('#test').click(function(){$.blockUI({message:$('#question'),css:{width:'275px'}});});$('#yes').click(function(){//updatetheblockmessage$.blockUI({message:"<h1>Remotecallinprogress...</h1>"});$.ajax({url:'wait.php',cache:false,complete:function(){//unblockwhenremotecallreturns$.unblockUI();}});});$('#no').click(function(){$.unblockUI();returnfalse;});});</script>...<inputid="test"type="submit"value="ShowDialog"/>...<divid="question"style="display:none;cursor:default"><h1>Wouldyouliketocontine?.</h1><inputtype="button"id="yes"value="Yes"/><inputtype="button"id="no"value="No"/></div>
For full-featured modal dialog support, check outSimple Modalby Eric Martin orjqModalby Brice Burgess.选项
BlockUI's default options look (exactly) like this:
//overridetheseinyourcodetochangethedefaultbehaviorandstyle$.blockUI.defaults={//messagedisplayedwhenblocking(usenullfornomessage)message:'<h1>Pleasewait...</h1>',title:null,//titlestring;onlyusedwhentheme==truedraggable:true,//onlyusedwhentheme==true(requiresjquery-ui.jstobeloaded)theme:false,//settotruetousewithjQueryUIthemes//stylesforthemessagewhenblocking;ifyouwishtodisable//theseanduseanexternalstylesheetthendothisinyourcode://$.blockUI.defaults.css={};css:{padding:0,margin:0,width:'30%',top:'40%',left:'35%',textAlign:'center',color:'#000',border:'3pxsolid#aaa',backgroundColor:'#fff',cursor:'wait'},//minimalstylesetusedwhenthemesareusedthemedCSS:{width:'30%',top:'40%',left:'35%'},//stylesfortheoverlayoverlayCSS:{backgroundColor:'#000',opacity:0.6,cursor:'wait'},//styletoreplacewaitcursorbeforeunblockingtocorrectissue//oflingeringwaitcursorcursorReset:'default',//stylesappliedwhenusing$.growlUIgrowlCSS:{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'},//IEissues:'about:blank'failsonHTTPSandjavascript:falseiss-l-o-w//(hattiptoJorgeH.N.deVasconcelos)iframeSrc:/^https/i.test(window.location.href||'')?'javascript:false':'about:blank',//forceusageofiframeinnon-IEbrowsers(handyforblockingapplets)forceIframe:false,//z-indexfortheblockingoverlaybaseZ:1000,//setthesetotruetohavethemessageautomaticallycenteredcenterX:true,//<--onlyeffectselementblocking(pageblockcontrolledviacssabove)centerY:true,//allowbodyelementtobestetchedinie6;thismakesblockinglookbetter//on"short"pages.disableifyouwishtopreventchangestothebodyheightallowBodyStretch:true,//enableifyouwantkeyandmouseeventstobedisabledforcontentthatisblockedbindEvents:true,//bedefaultblockUIwillsupresstabnavigationfromleavingblockingcontent//(ifbindEventsistrue)constrainTabKey:true,//fadeIntimeinmillis;setto0todisablefadeInonblockfadeIn:200,//fadeOuttimeinmillis;setto0todisablefadeOutonunblockfadeOut:400,//timeinmillistowaitbeforeauto-unblocking;setto0todisableauto-unblocktimeout:0,//disableifyoudon'twanttoshowtheoverlayshowOverlay:true,//iftrue,focuswillbeplacedinthefirstavailableinputfieldwhen//pageblockingfocusInput:true,//suppressestheuseofoverlaystylesonFF/Linux(duetoperformanceissueswithopacity)//nolongerneededin//applyPlatformOpacityRules:true,//callbackmethodinvokedwhenfadeInhascompletedandblockingmessageisvisibleonBlock:null,//callbackmethodinvokedwhenunblockinghascompleted;thecallbackis//passedtheelementthathasbeenunblocked(whichisthewindowobjectforpage//blocks)andtheoptionsthatwerepassedtotheunblockcall://onUnblock(element,options)onUnblock:null,//don'task;ifyoureallymustknow:/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493quirksmodeOffsetHack:4,//classnameofthemessageblockblockMsgClass:'blockMsg',//ifitisalreadyblocked,thenignoreit(don'tunblockandreblock)ignoreIfBlocked:false};
Changing the blockUI options is simple and can be done in one of two ways:
Globally, by directly overriding the values in the$.blockUI.defaultsobjectLocally, by passing an options object to theblockUI(orblock) function.
Global Overrides
You can change the default options by simply declaring different values for them. For example:
//changemessageborder$.blockUI.defaults.css.border='5pxsolidred';//makefadeOuteffectshorter$.blockUI.defaults.fadeOut=200;
Local Overrides
Local overrides are achieved by passing an object to theblockUI,unblockUI,blockorunblockfunctions. Theexact same options are availableto the local options object as are available in the global object. For example:
//changemessageborder$.blockUI({css:{border:'5pxsolidred'}});...//makefadeOuteffectshorter$.unblockUI({fadeOut:200});...//useadifferentmessage$.blockUI({message:'Holdon!'});...//useadifferentmessage$('#myDiv').block({message:'Processing...'});
插件官网：/block其他参考博文：/weblog//09/26/jquery-blockui-js-introduction/
