九乡新闻网超柔宝宝绒舒服吗:JQuery Block UI V2
来源：百度文库 编辑：九乡新闻网 时间：2024/04/26 13:11:03
JQuery Block UI V2
概述
The jQuery BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作[1]。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
在翻译过程中，本人进行了测试。目前V2版本不能用于IE8测试版。
这个插件的用法很简单。阻止用户与页面交互：
$.blockUI();
自定义提示信息：
$.blockUI({ message: '
Just a moment...
' });自定义显示样式：
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
解除对页面的锁定：
$.unblockUI();
如果要使用默认设置来同步所有的AJAX请求动作，代码如下：
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);
[1] 以同步传输的方式来使用XMLHttpRequest对象会在请求结束前阻止用户与浏览器的交互，直到请求结束。通常情况下，这不是一种好的用户体验。
锁定页面的例子
下面显示了几种锁定页面的方法。每个按钮都会激活blockUI并进行一次远程通信。
页面代码如下：
...
锁定元素的例子
这里展示了如何锁定页面中的元素，而不是整个页面。 请点击block/unblock按钮查看效果。
测试链接 - 请点击!
lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo 测试链接 - 请点击!
输入域测试
这段文字不会被锁定。 测试链接 - 请点击!
下面是这个页面的代码：
简单的对话框示例
此页展示了如何显示一个简单的模拟对话框。以下按钮将激活blockUI显示一段自定义信息。这个AJAX请求将根据用户的反应（是或否）来发送或取消，在用户决定的这段时间内，会一直保持页面的锁定状态。
下面是这个页面的代码：
...
...
全功能的模拟对话框支持请访问 jqModal Plugin，作者是Brice Burgess。
选项
BlockUI的默认选项设置如下：
// 可以使用以下代码来自定义行为和样式
$.blockUI.defaults = {
//锁定时显示的提示信息(无提示信息时设置为null)
message: '
Please wait...
',// 可以用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!' });
常见问题
BlockUI插件需要那个jQuery版本的支持？
BlockUI兼容jQuery v1.2.3以上的版本
BlockUI插件的V2版本有那些变化？
· 解除锁定的时候，用于提示信息的元素不会从DOM中移除
· 默认的遮罩层为黑色
· 可用的选项设置进行了统一和清理
· 设置插件选项的方法改变了
· 放弃了对Opera 8的支持
· 提高了源代码的可读性
· 移除了displayBox功能 (其他 plugins会做的更好)
我的原代码中的blockUI插件与新的2.00版兼容么？
不兼容，如果原代码改变了blockUI的默认属性，那么会出现兼容问题。如何设置选项的语法发生了细微的改变。请查看Options页来了解新版本的选项设置方法。
BlockUI插件还依赖于其他的插件么？
不依赖
我如何使用外部样式表来格式化提示信息？
请查看 demo页.
我可以改变页面锁定时默认的提示信息么？
可以。默认的提示信息储存在$.blockUI.defaults.message中。你可以以一个新的值来替换它，例如：
$.blockUI.defaults.message = "Please be patient...";
我能够改变遮罩层的颜色和透明度么？
可以。默认的遮罩层样式储存在 $.blockUI.defaults.overlayCSS中。 你可以指定一个不同的颜色和透明度，例如
// 使用黄色遮罩层
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
// 使遮罩层更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';
BlockUI支持Opera 8么？
不支持
在linux的FF上我为什么看不到遮罩层？
有几个人告诉我，在FF/Linux上整个页面的透明度渲染慢的让人发疯，所以默认情况下，在这些平台上遮罩层不透明。你可以重设applyPlatformOpacityRules值来启用透明度。 例如:
// 在FF/Linux下启用遮罩层透明
$.blockUI.defaults.applyPlatformOpacityRules = false;
下载
新版本的blockUI v2.00可以在这里得到: jquery.blockUI.js.
旧版本的blockUI仍然可以在这里得到： http://jqueryjs.googlecode.com/svn/trunk/plugins/blockUI/jquery.blockUI.js.
旧版本的文档在这里.
支持
BlockUI插件的支持请访问 jQuery Google Group.
BlockUI插件和文档由Mike Alsup制作完成。 意见或建议请发送至 jquery @ malsup . com.
中文化： transping.com