JQuer Block UI V2.docVIP

JQuery Block UI V2 概述 The jQuery BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作[1]。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。 在翻译过程中，本人进行了测试。目前V2版本不能用于IE8测试版。 这个插件的用法很简单。阻止用户与页面交互： $.blockUI(); 自定义提示信息： $.blockUI({ message: h1img 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: h1img 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 测试链接 - 请点击! ? 输入域测试 这段文字不会被锁定。 测试链接 - 请点击! 下面是这个页面的代码： script type=text/javascript $(function() { $(#blockButton).click(function() { $(div.test).block({ message: null }); }); $(#blockButton2).click(function() { $(div.test).block({  message: h1处理中.../h1,