В этой небольшой статье хочу рассказать об очень удобном и полезном плагине с помощью которого можно на время заблокировать всю страницу или отдельный элемент на странице.

Необходимость таких манипуляций с страницей или ее элементами возникла когда 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
1
2
3
4
5
6
7
8
9
10
11
12
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
}
Визуальные настройки блокирующего окна, стандартные параметры вполне подходят.
themedCSS
1
2
3
4
5
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
}
Так же как и css, настраивает внешний вид блокирующего окна. Но эта настройка работает только если включена настройка theme
overlayCSS
1
2
3
4
5
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6,
cursor: 'wait'
},
Данная настройка регулирует фон блокирующего окна, цвет фона, прозрачность и курсор.
cursorReset ‘default’ Не совсем понятная настройка, судя по экспериментам она регулирует тип курсора в момент снятия блокировки.
growlCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: null,
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},
Настраивает внешний вид быстрых сообщений. Подробнее об этом на демо странице, вызывается кодом: $.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 очень просто и удобно. Больше демо примеров есть на странице разработчика.

На странице автора плагина скрипт почему-то не доступен, там что скачиваем с гитхаба.

Возможно вас это заинтересует
comments powered by HyperComments