JS-- jQuery遮罩外掛 jquery.blockUI.js
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.defaults
object - 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/