Блокировать элемент на странице. JQuery BlockUI – блокировка страницы или отдельного элемента на странице. Блокировка всей страницы
Увы, но даже интересные сайты сайты со временем вводят у себя такие нововведения, которые могут не то, чтобы раздражать, но и довести "до белого каления", распространяющееся на его авторов. Вот так у меня и получилось с сайтом http://lifehacker.ru
Я его читаю, я получаю его рассылку, но меня "бесит" то, что меня снова и снова призывают подписаться на новости. Передо мной остро встал вопрос: как заблокировать отдельные элементы на сайте . К счастью, как сказал один из героев старого фильма, "нашлись, нашлись добрые люди..." (к/ф "Ирония судьбы или с лёгким паром"). Пришлось мне обратить внимание на установленное ранее в несколько своих браузеров дополнение (расширение) ublock.
Расширения и дополнения для браузера, по своему назначению являются одним и тем же. "По-буржуйскому" это соответствует термину плагины. Разница в терминологии относится лишь к браузерам. В Firefox они называются дополнениями, в Chrome и Opera – расширениями.
Итак, после установки этого замечательного ПО, снова иду на сайт и вызываю блокировку элемента. Вызов этой команды осуществляется по правому контекстному меню мыши.
После этого Вам придётся указать мышкой область, которую необходимо заблокировать. Необходимо подвести к этой области курсор и нажать левую кнопку мыши.
Данная операция потребует от Вас некоторой сноровки и соображения, но в результате в нижней правой части страницы Вы получите запрос на создание фильтра. В рассматриваемом примере:
После нажатия Вами кнопки "Создать" фильтр сразу же начнёт работать. Проверить это можно простым обновлением просматриваемой страницы.
Моё настроение резко изменилось в лучшую сторону. Пропев "Шпаги наголо, дворяне!" (к/ф "Д"Артаньян и три мушкетёра"), перехожу в решительное наступление против других, по моему мнению, лишних элементов. Сейчас меня "раздражает" правый виджет подписки на новости по электронной почте.
Блокировку этого элемента пришлось осуществить с помощью создания двух правил: строки адреса E-mail и кнопки "Готово".
После создания этих двух фильтров мне захотелось уже исполнить "Интернационал", так как слова "... весь мир насилья мы разрушим до основанья ..." наиболее точно отражали моё настроение. А дальше, "И тут Остапа понесло " (имеется в виду первоначальное значение данного афоризма) ... Карфаген должен быть разрушен – и далее мной были заблокированы виджеты лучшего способа читать Лайфхакер, чтения в твиттере, просмотра на ютубе и разных социальных сетей:
Теперь мне себя уже было не нужно уговаривать: "Спокойствие, только спокойствие", так как это самое спокойствие ничего не нарушало.
В конечном счёте расширением (дополнением) ublock были созданы несколько правил, которые теперь можно даже экспортировать в файл:
15.02.2016, 0:02:44 http://lifehacker.ru/2016/02/08/100-habits-2016/
> p
15.02.2016, 0:03:06 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru###mce-EMAIL
15.02.2016, 0:03:13 http://lifehacker.ru/2016/02/08/100-habits-2016/
15.02.2016, 0:03:19 http://lifehacker.ru/2016/02/08/100-habits-2016/
15.02.2016, 0:03:49 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru###lh-fullscreen-sub__left
15.02.2016, 0:04:16 http://lifehacker.ru/2016/02/08/100-habits-2016/
15.02.2016, 0:04:55 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-youtube.soc
15.02.2016, 0:08:17 http://lifehacker.ru/
Проверим, насколько верно предположение о том, что восклицательный знак относится к категории "Комментарий", а содержание самого фильтра составляет вторая строчка правила. Найдём в расширениях (дополнениях) ublock, перейдём в его "Настройки", вызовем "Показать панель управления" и посмотрим "Мои фильтры".
Удалим эти "лишние строчки" и получим фильтры:
Lifehacker.ru###lh-fullscreen-sub__left > p
Lifehacker.ru###mce-EMAIL
Lifehacker.ru###mc-embedded-subscribe
Lifehacker.ru###lh-fullscreen-sub__not-now
Lifehacker.ru###lh-fullscreen-sub__left
Lifehacker.ru###lh-fullscreen-sub__overlay
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-youtube.soc
||www.facebook.com/v2.0/plugins/page.php?adapt_container_width=true&app_id=161427693904771&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df242b43cac35a2%26domain%3Dlifehacker.ru%26origin%3Dhttp%253A%252F%252Flifehacker.ru%252Ff1d1b9113f6c558%26relation%3Dparent.parent&container_width=336&height=220&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Flifehacker.ru%2F&locale=ru_RU&sdk=joey&show_facepile=true&show_posts=true&small_header=false&width=500
Lifehacker.ru###lh_slides-2 > .soc-div > .ios-app-wrapper > .ios-left
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-twitter.soc > p
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-twitter.soc > .soc-wrapper
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-twitter.soc
Lifehacker.ru###lh_slides-2 > .soc-div > .mailchimp-wrapper
Снова перейдём на сайт http://lifehacker.ru и насладимся "чистой" страницей:
От всей души хочется сказать автору этого расширения (дополнения) большое человеческое спасибо.
Установка расширения Adblock Plus на браузеры
Первым делом, заходя на официальный сайт разработчиков данного расширения по этой ссылке adblockplus.org , вы увидите главную страницу сайта:
Здесь выбираем тот браузер, которым вы пользуетесь. Лично я пользуюсь браузером Chrome и поэтому у меня будет выглядеть кнопка для установки расширения так «Установить на Chrome». Понятное дело, что если вы выбираете браузер OPERA, то тогда у вас будет кнопка «Установить на Opera»
Нажимаем на «Установить на Chrome» и перед нами откроется это окошко:
Жмём на «Добавить» и попадаем сюда:
Как вы видите, в правом углу появилось окно с сообщением об установке расширения Adblock Plus и для его активации нужно будет нажать на красный значок «ABP». Это то, что мы и сделаем — Жмём!
Всё, теперь у вас установлено и активировано расширение для блокировки рекламы на всех сайтах.
У этого расширения есть настройки, в которых вы можете сделать персональные фильтры и исключение определённых доменов. Для того чтобы зайти в настройки, вам нужно нажать на красный значок «ABP» и внизу нажать на опцию «Настройки»
А подопытным сайтом станет блог telets.com.zp.ua/
Давайте зайдём на одну из его статей, отключив расширение Adblock Plus.
Сейчас я активирую расширение и вот что мы увидим:
Для того, чтобы выключить блокировку на сайте, нужно нажать на красный значок и выбрать опцию «Включён на этом сайте». Для того, чтобы опять включить блокировку, нужно нажать на «Отключён на этом сайте»
Заблокировать элемент на сайте
Для этого нужно опять нажать на значок ABP и выбрать опцию «Заблокировать элемент»
После этого, вам нужно будет выбрать любой элемент на сайте и нажать на него.
Для примера я попробую блокировать картинку к статье.
И так я нажал на опцию «Заблокировать элемент» и после этого нажал на картинку. Вот что вы увидите:
Мы видим, что открылось окошко и в нём фигурирует код с этой картинкой. Если мы сейчас нажмём на кнопку «Добавить», то этот код будет заблокирован и перестанет отображаться на блоге.
Нажимаю на «Добавить» и вот что мы увидим:
Разблокировать элемент на сайте
А сейчас я покажу вам, как вернуть заблокированный элемент, в нашем случае это картинка.
Опять же нажимаем на значок ABP, далее нажимаем на «Настройки», далее выбираем «Персональные фильтры».
В окне с персональными фильтрами вы увидите код картинки, которую мы заблокировали.
Выделяем весь код и нажимаем на «Удалить». После этого перезагружаем страницу блога и видим всё на своих местах.
В этом сообщении расскажу, как очень легко и просто заблокировать показ радио на страницах ЛиРу в браузерах Mozilla Firefox и в браузерах семейста Google Chrome (Chrome, Operа, Yandex и т. д.).
Часть 1. Блокируем радио в браузере Mozilla Firefox
Для начала вы должны поставить последнюю версию расширения .
Теперь надо навести на иконку расширению указатель мыши:
Потом нажать на левую кнопку мыши. В выпавшем меню выбрать пункт "Настройки фильтров":
Тут надо перейти во вкладку "Собственные фильтры" (синяя рамка на скриншоте ниже):
Перешли? Теперь нажмите "Добавить фильтр" (красная рамка на скриншоте выше).
Нажали? Теперь в появившейся форме нужно ввести "###mediametrics-radio" (без кавычек):
После ввода не забудьте нажать на "Enter".
У вас появится новый фильтр:
Теперь нужно не забыть поставить "галочку" в квадратик слева от него (см. скриншот выше). А потом нажать на кнопку "Закрыть".
Всё, радио на ЛиРу больше нет (и не только на ЛиРу, кстати).
Часть 2. Блокируем радио в семействе браузеров Google Chrome (Opera, Yandex и т. д.)
Для начала вы должны поставить последнюю версию расширения в ваш браузер Google Chrome, Opera или Yandex. Но как это сделать? Достаточно просто. В своё время весь процесс установки расширения "Adblock Plus" для Google Chrome описал в сообщении " ". Там первая часть сообщения так и называется "Как установить?". Понимаю, что не все любят переходит по ссылкам в сообщениях. А многие - так просто панически этого бояться. Но тут уж ничего не поделаешь. Придётся это сделать, увы!
Теперь надо навести на иконку расширению указатель мыши (зелёная рамка на скриншоте ниже):
Потом нажать на левую кнопку мыши. В выпавшем меню выбрать пункт "Настройки" (синяя рамка на скриншоте выше).
Тут надо перейти во вкладку "Персональные фильтры":
Так надо в строчку ввода добавить текст "###mediametrics-radio" (без кавычек, синяя рамка на скриншоте ниже):
Блокируем любой элемент страницы в Mozilla Firefox с помощью Adblock Plus
Возможно вас это заинтересует
В этой небольшой статье хочу рассказать об очень удобном и полезном плагине с помощью которого можно на время заблокировать всю страницу или отдельный элемент на странице.
Необходимость таких манипуляций с страницей или ее элементами возникла когда AJAX начал набирать свою популярность. Все знают что когда выполняется AJAX запрос то он выполняется в фоновом режиме, внешне он никак не отображается и как это обычно бывает пользователь не понимает что происходит и опять нажимает на кнопку или другой элемент который вызывает AJAX запрос, возникает большая вероятность что что-то может пойти не так). В таких случаях самым лучшим будет заблокировать для пользователя доступ к кнопке, форме или другому элементу, чтобы он не мог повторно запустить AJAX событие. И на мой взгляд плагин jQuery BlockUI подходит идеально, но конечно его можно применить и для других случаев, зависит от того что вам нужно.
Использование
Использование плагина очень простое, подключаем jQuery и сам jQuery BlockUI плаги, затем выполняем код:
Можно менять цвет текста и фона:
Блокировка всей страницы
В первых примерах уже было показано как заблокировать всю страницу:
Разблокировка:
Блокировка отдельного элемента
Здесь внимательно смотрите на функцию вызова, она немного другая, но принцип работы аналогичен:
Разблокировка:
Настройки
| Параметр | По умолчанию | Описание параметра | ||
|---|---|---|---|---|
| message | ‘Please wait…’ |
Текст сообщения который отображается при блокировки, можно указывать теги. | ||
| title | null | Устанавливает заголовок блокирующего окна. Эта настройка работает только если включена настройка theme | ||
| draggable | true | Позволяем перетягивать курсором мышки блокирующее окно. Эта настройка работает только если включена настройка theme | ||
| theme | false | Подключает визуальную тему и функционал от jQuery UI. Для кого-то может быть и полезная функция, но мне не нравится она, чтобы корректно все отображалось нужно будет еще подключать UI скрипты и стили. | ||
| css |
|
Визуальные настройки блокирующего окна, стандартные параметры вполне подходят. | ||
| themedCSS | Данная настройка регулирует фон блокирующего окна, цвет фона, прозрачность и курсор. | |||
| 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 функции
Примеры
$(document) .on ("submit" , ".form_submit" , function () { _this = $(this ) ; _block = _this; // запускаем блокировку элемента // в моем случае блокируется вся форма чтобы нельзя было отправить ее повторно $(_block).block({ message: "", //просто анимированная иконка, без текста 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 очень просто и удобно. Больше демо примеров есть на странице разработчика.
Возможно вас это заинтересует