В этой статье я рассмотрю плагин jQuery, который прекрасно подходит для блокирования пользовательского интерфейса на время выполнения какой-либо операции — обычно, фоновой операции на сервере.
Необходимость в таких манипуляциях с интерфейсом появилась с появлением AJAX. Когда вы начинаете выполнение AJAX-операции, вам часто необходимо ограничить пользователя в определенных действиях, которые могут конфликтовать с действиями, совершаемыми во время AJAX-операции. Чаще всего нужно заблокировать не весь пользовательский интерфейс, а только его часть, например, кнопку или набор полей ввода. Все, что обычно требуется в такой ситуации — заблокировать активные (кликабельные) элементы и отобразить сообщение «Выполняется операция…». После выполнения необходимой операции вам требуется разблокировать интерфейс. Годы проб и ошибок показали, что лучшим решением в такой ситуации будет наложение прозрачного или полупрозрачного блока поверх необходимой области страницы, не позволяя пользователю взаимодействовать с объектами этой области. BlockUI позволяет легко заблокировать любую часть страницы. Для использования плагина нужно помимо библиотеки jQuery подключить и сам плагин:
1 |
<script type="text/javascript" src="jquery.blockui.js" /> |
Последняя версия blockUI, обновленная в начале 2010 года, поддерживает jQuery 1.4.2. Плагин имеет два основных режима работы: он может блокировать всю страницу целиком или только её часть.
Для блокировки и разблокировки всей страницы нужно использовать функции $.blockUI и $.unblockUI. В примере ниже вся страница блокируется при нажатии на кнопку с идентификатором btnStart, разблокировка происходит после нажатия на любое место страницы.
1 |
$(document).ready(function() { |
2 |
$("#btnStart").click(function() { |
4 |
$(".blockOverlay").click($.unblockUI); |
Класс .blockOverlay назначается плагином блоку, располагаемому поверх страницы. Когда вы вызываете $.blockUI без дополнительных параметров плагин располагает полупрозрачный блок поверх страницы и сообщение «Please wait» по центру экрана. Вы можете изменить эффект наложения и сообщение, добавив дополнительные параметры при вызове функции $.blockUI. Кроме, того можно определить новые параметры по умолчанию для функции $.blockUI и вызывать её в дальнейшем без параметров. Например, изменить сообщение при вызове функции можно следующим образом:
1 |
$.blockUI( { message: "Загрузка..."} ); |
Ниже показано, как изменить значение по умолчанию для атрибута message:
1 |
$.blockUI.defaults.message = "Loading…"; |
Чтобы заблокировать элемент на странице, например, форму, нужно использовать другие функции плагина: block и unblock.
1 |
$("#myForm").block({ message: "Processing…" }); |
Для разблокировки нужно сделать следующее:
1 |
$("#myForm").unblock(); |
Рассмотренный плагин крайне полезен в случаях, когда надо предотвратить лишние действия пользователя при взаимодейстии с веб-сайтом или веб-приложением.
Источник: w3pro.ru
Июнь 20th, 2012 
Archi 
Опубликовано в рубрике 
Метки: