JQuery Plug-in BlockUI

js 代码

Overview

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.



Jquery BlockUI 插件 使你能够在不用锁定浏览器的情况下利用AJAX实现模拟同步。当插件被激活，他将会屏避用户对于页面，或者一部分页面的操作知道他被释放。BlockUI通过向DOM添加节点的方式，使得页面设计者能够设计出能够将用户超作屏避的界面和超作方式。

Usage is very simple; to block user activity for the page:

使用起来非常简单，下面的语句将会屏避用户对当前页面的一切超作：

$.blockUI();

Blocking with a custom message:

屏避的时候给用户的提示信息；

$.blockUI( '

 Just a moment...
' );

Blocking with custom style:

利用用户设定的样式屏避用户操作

$.blockUI( { backgroundColor: '#f00', color: '#fff'} );

To unblock the page:

解除页面锁定

$.unblockUI();

If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this:

如果想在得到所有Ajax请求之后为页面解锁，很简单，可以这样作：

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

[1] Using the XMLHttpRequest object in synchronous mode causes the entire browser to lock until the remote call completes. This is usually not a desirable behavior.

[1]在同步模式下使用XMLHTTPRequest对象会引起整个浏览器出于被锁定的状态，直到所有的远程请求完成。而这一现象并不是我们所希望看到的。