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>