|
В этой статье пойдет речь о библиотеке, которая позволяет сделать неактивной часть 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. После этого написали скрипт, который управляет дополнительным слоем.
Но прежде чем переходить к нему, рассмотрим структуру страницы.
У нас есть три блока:
- Форма с текстовым полем и кнопкой. При нажатии на кнопку необходимо отправить ajax запрос php скрипту (о нем чуть позже).
- Блок, в который будет помещен ответ сервера (строка 36).
- Блок с текстом, который будет показан на дополнительном слое (строки 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();Если библиотека вас заинтересовала, советую посмотреть и другие примеры.
Если есть желание поэкспериментировать, качайте архив с примером и библиотеками.
|
