Блокировка доступа к элементам web страницы. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

Блокировка доступа к элементам web страницы

В этой статье пойдет речь о библиотеке, которая позволяет сделать неактивной часть web страницы или всю ее целиком. Библиотека называется jQuery BlockUI Plugin и, как следует из названия, представляет собой плагин к jQuery.

Принцип работы следующий. Библиотека создает дополнительный слой (overlay) над всей страницей или каким-то блоком на ней. Этот слой может содержать сообщение, картинку, диалог или вообще другую страницу с любыми элементами управления.

Если вы видели, как работают библиотеки типа Lightbox, то представляете, о чем идет речь. Приведу простой пример. Допустим, необходимо заблокировать доступ к странице на время выполнения Ajax запроса. Для этого нужно подключить файл библиотеки, и написать небольшую функцию. Рассмотрим код страницы.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Заголовок</title>
  6. <link rel="stylesheet" type="text/css" href="styles.css" media="all" />
  7. <script type="text/javascript" src="jquery-1.2.3.js"></script>
  8. <script type="text/javascript" src="jquery.blockUI.js"></script>
  9. <script type="text/javascript">
  10. $().ajaxStop($.unblockUI);
  11.  
  12. $(document).ready(
  13.     function () {
  14.         $('#sendData').click(
  15.             function() {
  16.                 $.blockUI({message: $('#topLayer'), css: { 'font-size': '0.7em' }});
  17.                 $('#result').load('check.php', {'name': $('#nameField').val()});
  18.             }
  19.         );
  20.     }
  21. );
  22. </script>
  23. </head>
  24. <body>
  25.  
  26. <form action="#" method="post">
  27. <p>
  28. <label for="nameField">Имя: </label>
  29. <input type="text" name="nameField" id="nameField" size="30" />
  30. </p>
  31. <p>
  32. <input type="button" name="sendData" id="sendData" value="Отправить" />
  33. </p>
  34. </form>
  35.  
  36. <div id="result"></div>
  37.  
  38. <div id="topLayer" style="display:none;">
  39.     <h1>Ваш запрос обрабатывается. Пожалуйста, подождите:</h1>
  40. </div>
  41. </body>
  42. </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-х секундную задержку, чтобы можно было рассмотреть дополнительный слой.

  1. <?php
  2. sleep(3);
  3. echo 'Имя состоит из '.mb_strlen($_POST['name']).' символа(ов)';
  4. ?>

Вот и все. После завершения запроса страница будет разблокирована.

Небольшое дополнение.

Любой блок web страницы можно заблокировать так же легко, как и всю ее целиком.

Например, при выполнении ajax запроса пользователю будет понятнее, если неактивной станет только форма, а не вся страница целиком. Для данного примера это можно сделать так:

$('form').block({ message: :. });
$('form').unblock();Если библиотека вас заинтересовала, советую посмотреть и другие примеры.

Если есть желание поэкспериментировать, качайте архив с примером и библиотеками.


Дата публикации: 13.09.2010
simplecoding.org

   Ваш псевдоним:
Ваш комментарий:

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:19
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий


 
Copyright © 2006-2017, wb0.ru