jQuery и блокировка пользовательского интерфейса

Версия для печати

В этой статье я рассмотрю плагин jQuery, который прекрасно подходит для блокирования пользовательского интерфейса на время выполнения какой-либо операции — обычно, фоновой операции на сервере.

Необходимость в таких манипуляциях с интерфейсом появилась с появлением AJAX. Когда вы начинаете выполнение AJAX-операции, вам часто необходимо ограничить пользователя в определенных действиях, которые могут конфликтовать с действиями, совершаемыми во время AJAX-операции. Чаще всего нужно заблокировать не весь пользовательский интерфейс, а только его часть, например, кнопку или набор полей ввода. Все, что обычно требуется в такой ситуации — заблокировать активные (кликабельные) элементы и отобразить сообщение "Выполняется операция...". После выполнения необходимой операции вам требуется разблокировать интерфейс. Годы проб и ошибок показали, что лучшим решением в такой ситуации будет наложение прозрачного или полупрозрачного блока поверх необходимой области страницы, не позволяя пользователю взаимодействовать с объектами этой области. BlockUI позволяет легко заблокировать любую часть страницы. Для использования плагина нужно помимо библиотеки jQuery подключить и сам плагин: 

<script type="text/javascript" src="jquery.blockui.js" />

Последняя версия blockUI, обновленная в начале 2010 года, поддерживает jQuery 1.4.2. Плагин имеет два основных режима работы: он может блокировать всю страницу целиком или только её часть.

Для блокировки и разблокировки всей страницы нужно использовать функции $.blockUI и $.unblockUI. В примере ниже вся страница блокируется при нажатии на кнопку с идентификатором btnStart, разблокировка происходит после нажатия на любое место страницы. 

$(document).ready(function() {
  $("#btnStart").click(function() {
    $.blockUI();
    $(".blockOverlay").click($.unblockUI);
  });
});

Класс .blockOverlay назначается плагином блоку, располагаемому поверх страницы. Когда вы вызываете $.blockUI без дополнительных параметров плагин располагает полупрозрачный блок поверх страницы и сообщение "Please wait" по центру экрана. Вы можете изменить эффект наложения и сообщение, добавив дополнительные параметры при вызове функции $.blockUI. Кроме, того можно определить новые параметры по умолчанию для функции $.blockUI и вызывать её в дальнейшем без параметров. Например, изменить сообщение при вызове функции можно следующим образом:  

$.blockUI( { message: "Загрузка..."} );

Ниже показано, как изменить значение по умолчанию для атрибута message:  

$.blockUI.defaults.message = "Loading…";

Чтобы заблокировать элемент на странице, например, форму, нужно использовать другие функции плагина: block и unblock.

$("#myForm").block({ message: "Processing…" });

Для разблокировки нужно сделать следующее:

$("#myForm").unblock();

Рассмотренный плагин крайне полезен в случаях, когда надо предотвратить лишние действия пользователя при взаимодейстии с веб-сайтом или веб-приложением.