JQuery blockUI 的使用方法
JQueryBlock UI V2
概述
The jQuery BlockUI 插件是用于进行AJAX 操作时模拟同步传输时锁定浏览器操作[1] 。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM 中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
在翻译过程中，本人进行了测试。目前V2版本不能用于IE8测试版。
这个插件的用法很简单。阻止用户与页面交互：
$.blockUI();
自定义提示信息：
$.blockUI({ message: '<h1><imgsrc="busy.gif" /> Just a moment...</h1>' });
自定义显示样式：
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'}});
解除对页面的锁定：
$.unblockUI();
如果要使用默认设置来同步所有的AJAX请求动作，代码如下：
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);
[1] 以同步传输的方式来使用XMLHttpRequest对象会在请求结束前阻止用户与浏览器的交互，直到请求结束。通常情况下，这不是一种好的用户体验。
锁定页面的例子
下面显示了几种锁定页面的方法。每个按钮都会激活blockUI并进行一次远程通信。
页面代码如下：
<script type="text/javascript">
// unblock whenajax activity stops
$().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" /> 请稍后...</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>正在处理，请稍侯...</h1>
</div>
简单的对话框示例
此页展示了如何显示一个简单的模拟对话框。以下按钮将激活blockUI 显示一段自定义信息。这个AJAX请求将根据用户的反应（是或否）来发送或取消，在用户决定的这段时间内，会一直保持页面的锁定状态。
下面是这个页面的代码：
<script type="text/javascript">
$(function() {
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// updatethe block message
$.blockUI({ message: "<h1>正在进行通信...</h1>"});
$.ajax({
url:'wait.php',
cache:false,
complete: function() {
//unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click($.unblockUI);
});
</script>
...
<input id="test" type="submit"value="显示对话框" />
...
<div id="question" style="display:none;cursor: default">
<h1>你确信要继续么？.</h1>
<inputtype="button" id="确认"value="Yes" />
<inputtype="button" id="取消"value="No" />
</div>
全功能的模拟对话框支持请访问 jqModal Plugin，作者是Brice Burgess。
你确信要继续么？
选项
BlockUI的默认选项设置如下：
// 可以使用以下代码来自定义行为和样式
$.blockUI.defaults = {
//锁定时显示的提示信息(无提示信息时设置为null)
message: '<h1>Please wait...</h1>',
// 可以用CSS来格式化锁定时显示的信息
// 如果你希望使用一个外部样式表，请使用一下代码
//$.blockUI.defaults.css = {};
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff'
},
// 设置遮罩层的样式
overlayCSS: {
backgroundColor:'#000',
opacity: '0.6'
},
// 允许在ie6中缩放body元素。这会使较短的页面看上去好一些
// 如果你不想body元素的高度被改变，请设置为disable
allowBodyStretch:true,
// 默认情况下blockUI会禁止tab导航
constrainTabKey:true,
// fadeOut时间单位为毫秒。设为0的话，在解除锁定时不使用fadeout效果。
fadeOut: 400,
// 禁止在FF/Linux上使用遮罩层样式(由于透明度的性能问题)
applyPlatformOpacityRules: 1
};
改变blockUI的设置非常简单，有2种方式：
- 1、全局设置, 通过直接指定$.blockUI.defaults 对象的值来设置。
- 2、局部设置, 将options对象放到 blockUI (或 block ) 函数内部。
全局设置
你可以通过直接的赋值来改变默认的选项。例如：
// 改变提示信息的边框
$.blockUI.defaults.css.border = '5px solid red';
// 缩短fadeOut效果的时间
$.blockUI.defaults.fadeOut = 200;
局部设置
局部设置是将options对象放到 blockUI (或block ) 函数内部。这会强制使用局部设置来代替全局设置的值。例如:
// 改变提示信息的边框
$.blockUI({ css: { border = '5px solid red'} });
...
// 缩短fadeOut效果的时间
$.blockUI({ fadeOut: 200 });
...
// 使用一个不同的提示信息
$.blockUI({ message: 'Hold on!' });