В этой статье я хочу рассказать о библиотеке, которая позволяет сделать неактивной часть web страницы или всю ее целиком.
Библиотека называется jQuery BlockUI Plugin и, как следует из названия, представляет собой плагин к jQuery.
Принцип работы следующий. Библиотека создает дополнительный слой (overlay) над всей страницей или каким-то блоком на ней.
Этот слой может содержать сообщение, картинку, диалог или вообще другую страницу с любыми элементами управления.
Если вы видели, как работают библиотеки типа Lightbox, то представляете, о чем идет речь.
Приведу простой пример. Допустим, необходимо заблокировать доступ к странице на время выполнения Ajax запроса.
Для этого нужно подключить файл библиотеки, и написать небольшую функцию. Рассмотрим код страницы.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заголовок</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript">
$().ajaxStop($.unblockUI);
$(document).ready(
function () {
$('#sendData').click(
function() {
$.blockUI({message: $('#topLayer'), css: { 'font-size': '0.7em' }});
$('#result').load('check.php', {'name': $('#nameField').val()});
}
);
}
);
</script>
</head>
<body>
<form action="#" method="post">
<p>
<label for="nameField">Имя: </label>
<input type="text" name="nameField" id="nameField" size="30" />
</p>
<p>
<input type="button" name="sendData" id="sendData" value="Отправить" />
</p>
</form>
<div id="result"></div>
<div id="topLayer" style="display:none;">
<h1>Ваш запрос обрабатывается. Пожалуйста, подождите...</h1>
</div>
</body>
</html>
Как видите – это обычная страница.
В строках 7 и 8 мы подключили jQuery и BlockUI. После этого написали скрипт, который управляет дополнительным слоем.
Но прежде чем переходить к нему, рассмотрим структуру страницы.
У нас есть три блока.
1) Форма с текстовым полем и кнопкой. При нажатии на кнопку необходимо отправить ajax запрос php скрипту (о нем чуть позже).
2) Блок, в который будет помещен ответ сервера (строка 36).
3) Блок с текстом, который будет показан на дополнительном слое (строки 38-40). Для того, чтобы этот блок не был виден на странице мы установили стиль display:none.
Возвращаемся к скрипту (строки 9-22).
Прежде всего, предусматриваем отключение дополнительного слоя сразу после завершения Ajax запроса (строка 10). Как видите, для этого достаточно вызвать $.unblockUI.
Затем назначаем обработчик нажатия на кнопку «Отправить» (строки 14-19). Этот обработчик создает дополнительный слой (с помощью функции $.blockUI) и отправляет запрос.
В параметрах функции мы указываем:
message – текст, который появится на дополнительном слое (в нашем случае – содержимое блока topLayer).
css – стили, которые будут применяться к этому слою.
Естественно, это не все параметры. Полный список размещен на этой странице.
Следующий шаг – отправка ajax запроса. Исключительно для целей тестирования я написал небольшой php скрипт, который просто возвращает количество букв во введенном имени. Кроме того, скрипт создает 3-х секундную задержку, чтобы можно было рассмотреть дополнительный слой.
<?php sleep(3); echo 'Имя состоит из '.mb_strlen($_POST['name']).' символа(ов)'; ?>
Вот и все. После завершения запроса страница будет разблокирована.
Небольшое дополнение.
Любой блок web страницы можно заблокировать так же легко, как и всю ее целиком.
Например, при выполнении ajax запроса пользователю будет понятнее, если неактивной станет только форма, а не вся страница целиком. Для данного примера это можно сделать так:
$('form').block({ message: .... });
$('form').unblock();
Если библиотека вас заинтересовала, советую посмотреть и другие примеры.
Скачать пример.
Если есть желание поэкспериментировать, качайте архив с примером (и библиотеками).
Удачи!
