JQuery Block UI V2
JQuery Block UI V2
概述
The jQuery BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 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); 以同步传输的方式来使用XMLHttpRequest对象会在请求结束前阻止用户与浏览器的交互,直到请求结束。通常情况下,这不是一种好的用户体验。
锁定页面的例子
下面显示了几种锁定页面的方法。每个按钮都会激活blockUI并进行一次远程通信。
页面代码如下:
<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><div style="display: none;">正在处理,请稍侯...
页:
[1]