JQuery Block UI V2

paskaa

 
JQuery Block UI V2

概述

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并进行一次远程通信。
        
        页面代码如下：        
<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;">正在处理，请稍侯...