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

Владимир | | Ajax, CSS, HTML, JavaScript, PHP, Web разработка.

jquery blockui plugin

В этой статье я хочу рассказать о библиотеке, которая позволяет сделать неактивной часть 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();

Если библиотека вас заинтересовала, советую посмотреть и другие примеры.

Скачать пример.

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

Удачи!

  • Я каждый ваш пост в ридере отмечаю звездочкой! Спасибо, очень ценные фичи нахожу в вашем коде, обязательно будем использовать на своих сайтах.
    Успехов в творчестве. (:

  • Я каждый ваш пост в ридере отмечаю звездочкой! Спасибо, очень ценные фичи нахожу в вашем коде, обязательно будем использовать на своих сайтах.
    Успехов в творчестве. (:

  • Елена

    Все замечательно! Класс!!!

  • Елена

    Все замечательно! Класс!!!

  • bersy

    соглашусь с Денисом, есть довольно интересные посты

    • Мне интересно услышать и отрицательные отзывы. Какие посты не понравилось? И почему?

  • bersy

    соглашусь с Денисом, есть довольно интересные посты

    • Мне интересно услышать и отрицательные отзывы. Какие посты не понравилось? И почему?

  • bersy

    простите что все ваши посты не отмечаю звездочкой )

    почему? очень просто, не все раскрываемые вами темы интересуют меня в одинаковой мере, каждому свое

    не нужно делать за меня выводы, о том, что какой-то пост мне не понравился, я не писал)

    ну вот, оставил один маленький комментик и приходится отдуваться)

  • bersy

    простите что все ваши посты не отмечаю звездочкой )

    почему? очень просто, не все раскрываемые вами темы интересуют меня в одинаковой мере, каждому свое

    не нужно делать за меня выводы, о том, что какой-то пост мне не понравился, я не писал)

    ну вот, оставил один маленький комментик и приходится отдуваться)

  • bersy

    о том, что…

    нужно с новой строки, а то смысл меняется )

  • bersy

    о том, что…

    нужно с новой строки, а то смысл меняется )

  • Я, наверное, не правильно выразился 😉
    Вряд ли найдется человек, которому будут интересны все посты или даже половина. Я сам читаю около сотни блогов и очень часто просто просматриваю заголовки и мельком текст.

    Мне интересны недостатки в тех постах, которые вы читали. Так сказать конструктивная критика 🙂 . Очень помогает 😉 .

  • Я, наверное, не правильно выразился 😉
    Вряд ли найдется человек, которому будут интересны все посты или даже половина. Я сам читаю около сотни блогов и очень часто просто просматриваю заголовки и мельком текст.

    Мне интересны недостатки в тех постах, которые вы читали. Так сказать конструктивная критика 🙂 . Очень помогает 😉 .

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

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

  • Ваня — так лучше самому сделать, в чем проблема то…

  • Ваня — так лучше самому сделать, в чем проблема то…

  • Спасибо. Воспользуюсь!

  • Спасибо. Воспользуюсь!

  • Спасибо большое вам! Мне как раз необходим был именно такой вариант решения!

  • Спасибо большое вам! Мне как раз необходим был именно такой вариант решения!

  • Sanyas1995

    la2best.sytes.net
    la2best.sytes.net
    la2best.sytes.net
    la2best.sytes.net
    la2best.sytes.net
    la2best.sytes.net
    la2best.sytes.net
    la2best.sytes.net
    la2best.sytes.net