Overview
jQuery BlockUI 插件可以在不同锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会组织用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。
使用jQuery BlockUI，首先需要在jQuery后面引用 jquery.blockUI.js
jquery.blockUI.js插件下载地址：http://jquery.malsup.com/block/
用法很简单，组织用户对页面的交互：
$.blockUI();使用自定义信息阻塞UI
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</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:
<script type="text/javascript">
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);
function test() {
$.ajax({ url: 'wait.php', cache: false });
}
$(document).ready(function() {
$('#pageDemo1').click(function() {
$.blockUI();
test();
});
$('#pageDemo2').click(function() {
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
test();
});
$('#pageDemo3').click(function() {
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } });
test();
});
$('#pageDemo4').click(function() {
$.blockUI({ message: $('#domMessage') });
test();
});
});
</script>
...
<div id="domMessage" style="display:none;">
<h1>We are processing your request. Please be patient.</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.
Option 1 Option 2 lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet Option 1 Option 2 lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo Test 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:
<script type="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: '3px solid #a00' }
});
});
$('#unblockButton').click(function() {
$('div.test').unblock();
});
$('a.test').click(function() {
alert('link clicked');
return false;
});
});
</script>
简单模态框示例：
This page demonstrates how to display a simple modal dialog. The button below will invoke blockUI with 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:
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
...
<input id="test" type="submit" value="Show Dialog" />
...
<div id="question" style="display:none; cursor: default">
<h1>Would you like to contine?.</h1>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
For full-featured modal dialog support, check out Simple Modal by Eric Martin or jqModal by Brice Burgess.
选项BlockUI's default options look (exactly) like this:// override these in your code to change the default behavior and style
$.blockUI.defaults = {
// message displayed when blocking (use null for no message)
message: '<h1>Please wait...</h1>',
title: null, // title string; only used when theme == true
draggable: true, // only used when theme == true (requires jquery-ui.js to be loaded)
theme: false, // set to true to use with jQuery UI themes
// styles for the message when blocking; if you wish to disable
// these and use an external stylesheet then do this in your code:
// $.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'
},
// minimal style set used when themes are used
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
},
// styles for the overlay
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6,
cursor: 'wait'
},
// style to replace wait cursor before unblocking to correct issue
// of lingering wait cursor
cursorReset: 'default',
// styles applied when using $.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 issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
// (hat tip to Jorge H. N. de Vasconcelos)
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',
// force usage of iframe in non-IE browsers (handy for blocking applets)
forceIframe: false,
// z-index for the blocking overlay
baseZ: 1000,
// set these to true to have the message automatically centered
centerX: true, // <-- only effects element blocking (page block controlled via css above)
centerY: true,
// allow body element to be stetched in ie6; this makes blocking look better
// on "short" pages. disable if you wish to prevent changes to the body height
allowBodyStretch: true,
// enable if you want key and mouse events to be disabled for content that is blocked
bindEvents: true,
// be default blockUI will supress tab navigation from leaving blocking content
// (if bindEvents is true)
constrainTabKey: true,
// fadeIn time in millis; set to 0 to disable fadeIn on block
fadeIn: 200,
// fadeOut time in millis; set to 0 to disable fadeOut on unblock
fadeOut: 400,
// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
timeout: 0,
// disable if you don't want to show the overlay
showOverlay: true,
// if true, focus will be placed in the first available input field when
// page blocking
focusInput: true,
// suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
// no longer needed in 2012
// applyPlatformOpacityRules: true,
// callback method invoked when fadeIn has completed and blocking message is visible
onBlock: null,
// callback method invoked when unblocking has completed; the callback is
// passed the element that has been unblocked (which is the window object for page
// blocks) and the options that were passed to the unblock call:
// onUnblock(element, options)
onUnblock: null,
// don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4,
// class name of the message block
blockMsgClass: 'blockMsg',
// if it is already blocked, then ignore it (don't unblock and reblock)
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.defaultsobject - Locally, by passing an options object to the
blockUI(orblock) function.
Global Overrides
You can change the default options by simply declaring different values for them. For example:// change message border
$.blockUI.defaults.css.border = '5px solid red';
// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 200;
Local Overrides
Local overrides are achieved by passing an object to the blockUI, unblockUI, block or unblock functions. The exact same options are available to the local options object as are available in the global object. For example:// change message border
$.blockUI({ css: { border: '5px solid red'} });
...
// make fadeOut effect shorter
$.unblockUI({ fadeOut: 200 });
...
// use a different message
$.blockUI({ message: 'Hold on!' });
...
// use a different message
$('#myDiv').block({ message: 'Processing...' }); 插件官网：http://jquery.malsup.com/block
其他参考博文：http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/