JQuery Block UI V2
最好参考地址:http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html
The jQuery BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作[1]。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
在翻译过程中，本人进行了测试。目前V2版本不能用于IE8测试版。
这个插件的用法很简单。阻止用户与页面交互：
- $.blockUI();
自定义提示信息：
- $.blockUI({ message: ‘<h1><img src=”busy.gif” /> Just a moment…</h1>’ });
自定义显示样式：
- $.blockUI({ css: { backgroundColor: ‘#f00’, color: ‘#fff’} });
解除对页面的锁定：
- $.unblockUI();
如果要使用默认设置来同步所有的AJAX请求动作，代码如下：
- $().ajaxStart($.blockUI).ajaxStop($.unblockUI);
[1] 以同步传输的方式来使用XMLHttpRequest对象会在请求结束前阻止用户与浏览器的交互，直到请求结束。通常情况下，这不是一种好的用户体验。
锁定页面的例子
下面显示了几种锁定页面的方法。每个按钮都会激活blockUI并进行一次远程通信。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
页面代码如下： Html代码 <script type="text/javascript"> // unblock when ajax 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> |
锁定元素的例子
这里展示了如何锁定页面中的元素，而不是整个页面。 请点击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的设置非常简单，有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!’ });
