paskaa 发表于 2013-2-7 22:28:32

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]
查看完整版本: JQuery Block UI V2