В этой небольшой статье хочу рассказать об очень удобном и полезном плагине с помощью которого можно на время заблокировать всю страницу или отдельный элемент на странице.
Необходимость таких манипуляций с страницей или ее элементами возникла когда AJAX начал набирать свою популярность. Все знают что когда выполняется AJAX запрос то он выполняется в фоновом режиме, внешне он никак не отображается и как это обычно бывает пользователь не понимает что происходит и опять нажимает на кнопку или другой элемент который вызывает AJAX запрос, возникает большая вероятность что что-то может пойти не так). В таких случаях самым лучшим будет заблокировать для пользователя доступ к кнопке, форме или другому элементу, чтобы он не мог повторно запустить AJAX событие. И на мой взгляд плагин jQuery BlockUI подходит идеально, но конечно его можно применить и для других случаев, зависит от того что вам нужно.
Использование
Использование плагина очень простое, подключаем jQuery и сам jQuery BlockUI плаги, затем выполняем код:
1 | $.blockUI(); |
Этот код просто заблокирует всю страницу используя свои настройки по умолчанию.
Добавим в блокировке сообщение:
1 2 3 | $.blockUI({ message: '</p> <h1><img src="busy.gif" /> Подождите, выполняется операция...</h1> <p>' }); |
Можно менять цвет текста и фона:
1 | $.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} }); |
У плагина большое количество полезных настроек, их рассмотрим подробно ниже, а пока разблокируем страницу:
1 | $.unblockUI(); |
Блокировка всей страницы
В первых примерах уже было показано как заблокировать всю страницу:
1 | $.blockUI(); // блокируем страницу |
Разблокировка:
1 | $.unblockUI(); // разблокируем страницу |
Блокировка отдельного элемента
Здесь внимательно смотрите на функцию вызова, она немного другая, но принцип работы аналогичен:
1 | $('#element').block(); // заблокируем отдельный элемент |
Разблокировка:
1 | $('#element').unblock(); // раззаблокируем элемент заблокированный ранее |
Настройки
| Параметр | По умолчанию | Описание параметра | ||
|---|---|---|---|---|
| message | ‘<h1>Please wait…</h1>’ | Текст сообщения который отображается при блокировки, можно указывать теги. | ||
| title | null | Устанавливает заголовок блокирующего окна. Эта настройка работает только если включена настройка theme | ||
| draggable | true | Позволяем перетягивать курсором мышки блокирующее окно. Эта настройка работает только если включена настройка theme | ||
| theme | false | Подключает визуальную тему и функционал от jQuery UI. Для кого-то может быть и полезная функция, но мне не нравится она, чтобы корректно все отображалось нужно будет еще подключать UI скрипты и стили. | ||
| css |
|
Визуальные настройки блокирующего окна, стандартные параметры вполне подходят. | ||
| themedCSS |
|
Так же как и css, настраивает внешний вид блокирующего окна. Но эта настройка работает только если включена настройка theme | ||
| overlayCSS |
|
Данная настройка регулирует фон блокирующего окна, цвет фона, прозрачность и курсор. | ||
| cursorReset | ‘default’ | Не совсем понятная настройка, судя по экспериментам она регулирует тип курсора в момент снятия блокировки. | ||
| growlCSS |
|
Настраивает внешний вид быстрых сообщений. Подробнее об этом на демо странице, вызывается кодом: $.growlUI(‘Заголовок’, ‘Текст!’); | ||
| iframeSrc | js code | Судя по описанию из документации, настройка что-то делает когда работает в старых IE браузерах. | ||
| forceIframe | false | Связана с настройкой выше. | ||
| baseZ | 1000 | Регулирует позицию блокирующего слоя по оси Z. | ||
| centerX и centerY | true | Центрирует блокирующее окно. | ||
| allowBodyStretch | true | Еще одна настройка которая не показала особого эффекта, скорей всего предназначена для старых IE браузеров. | ||
| bindEvents | true | Блокирует нажатия кнопок мыши. | ||
| constrainTabKey | true | Блокирует нажатие кнопки Tab<./td> | ||
| fadeIn | 200 | Скорость анимации при появлении. | ||
| fadeOut | 400 | Скорость анимации при скрытии. | ||
| timeout | 0 | По истечении указанного времени автоматически снимает блокировку. | ||
| showOverlay | true | Отключает наложение фона за блокирующем окном. | ||
| focusInput | true | Судя по описанию в документации, должно устанавливать курсор и первое пустое текстовое поле на странице. | ||
| blockMsgClass | ‘blockMsg’ | CSS класс блокирующего окна. | ||
| ignoreIfBlocked | false | Если элемент или страница уже заблокированы то повторно не блокируем. | ||
| quirksmodeOffsetHack | 4 | какая-то непонятная секретная настройка о которой даже в документации ничего не пишут )) |
CallBack функции
| Функция | Описание |
|---|---|
| onBlock | Событие срабатывает когда блокирующее окно полностью про рисуется на странице |
| onUnblock | Событие срабатывает когда блокирующее окно полностью удаляется(onUnblock(element, options)) |
Примеры
На по следок хотелось бы поделиться своим опытом использования этого плагина в работе, может кому понадобится). В основном я использую его при ajax запросах.
1 | $(document).on('submit', '.form_submit', function(){ _this = $(this); _block = _this; // запускаем блокировку элемента // в моем случае блокируется вся форма чтобы нельзя было отправить ее повторно $(_block).block({ message: '<i class="icon-spinner4 spinner"></i>', //просто анимированная иконка, без текста overlayCSS: { backgroundColor: '#fff', opacity: 0.8, cursor: 'wait' }, css: { border: 0, padding: 0, backgroundColor: 'transparent' } }); $.ajax({ url: _this.attr('action'), type: 'POST', data: _this.serialize(), dataType: 'JSON', success: function (data) { /*....*/ }, error: function (data) { /*....*/ }, complete: function(data) { $(_block).unblock(); // снимаем блокировку } }); return false; }); |
Вот и все, использовать плагин jQuery BlockUI очень просто и удобно. Больше демо примеров есть на странице разработчика.
На странице автора плагина скрипт почему-то не доступен, там что скачиваем с гитхаба.