###
  • Програми
  • Безпека
  • Новини
  • Цікаве
  • Поради
  • Новини
  • Огляди

    • Блокувати елемент на сторінці. JQuery BlockUI – блокування сторінки чи окремого елемента на сторінці. Блокування всієї сторінки

    04.03.2020 Новини


    На жаль, навіть цікаві сайти сайти з часом вводять у себе такі нововведення, які можуть не те, щоб дратувати, а й довести "до білого жару", що поширюється на його авторів. Ось так у мене і вийшло із сайтом http://lifehacker.ru


    Я його читаю, я отримую його розсилку, але мене "бешкетує" те, що мене знову і знову закликають підписатися на новини. Переді мною гостро постало питання: Як заблокувати окремі елементи на сайті. На щастя, як сказав один із героїв старого фільму, "знайшлися, знайшлися добрі люди..." (к/ф "Іронія долі або з легкою парою"). Довелося мені звернути увагу на встановлене раніше кілька своїх браузерів доповнення (розширення) ublock.

    Розширення та доповнення для браузера, за своїм призначенням є одним і тим же. "По-буржуйськи" це відповідає терміну плагіни. Різниця в термінології відноситься лише до браузерів. У Firefox вони називаються доповненнями, у Chrome та Opera – розширеннями.


    Отже, після встановлення цього чудового ПЗ, знову йду на сайт і викликаю блокування елемента. Виклик цієї команди здійснюється праворуч контекстному менюмиші.



    Після цього Вам доведеться вказати мишкою область, яку потрібно заблокувати. Необхідно підвести курсор до цієї області та натиснути ліву кнопкумиші.



    Ця операція вимагатиме від Вас деякої вправності та міркування, але в результаті в нижній правій частині сторінки Ви отримаєте запит на створення фільтра. У цьому прикладі:


    Після натискання Вами кнопки "Створити" фільтр одразу почне працювати. Перевірити це можна простим оновленнямсторінки, що переглядається.


    Мій настрій різко змінився кращий бік. Проспів "Шпаги наголо, дворяни!" (к/ф "Д"Артаньян і три мушкетери"), переходжу в рішучий наступ проти інших, на мою думку, зайвих елементів. Зараз мене "дратує" правий віджет підписки на новини електронною поштою.
    Блокування цього елемента довелося здійснити за допомогою створення двох правил: рядка адреси електронної пошти та кнопки "Готово".



    Після створення цих двох фільтрів мені захотілося вже виконати "Інтернаціонал", тому що слова "...весь світ насильства ми зруйнуємо дощенту..." найбільш точно відбивали мій настрій. А далі, "І тут Остапа понесло" (мається на увазі первісне значення даного афоризму) ... Карфаген має бути зруйнований - і далі мною були заблоковані віджети кращого способучитати Лайфхакер, читання в твіттері, перегляду на ютубі та різних соціальних мереж:




    Тепер мені себе вже було не потрібно вмовляти: "Спокій, тільки спокій", тому що цей самий спокій нічого не порушував.


    У кінцевому рахунку розширенням (доповненням) 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.phc32 26domain%3Dlifehacker.ru%26origin%3Dhttp%253A%252F%252Flifehacker.ru%252Ff1d1b9113f6c558%26relation%3Dparent.parent&container_width=336&height=220&hide ru_UA&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, Opera, 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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    css: (
    padding: 0 ,
    margin: 0 ,
    width: "30%" ,
    top: "40%",
    left: "35%" ,
    TextAlign: "центр" ,
    color: "#000" ,
    border: "3px solid #aaa" ,
    backgroundColor: "#fff" ,
    cursor: "wait"
    }

    		Візуальні налаштування блокуючого вікна, стандартні параметрицілком підходять.
    themedCSS Ця настройка регулює фон блокуючого вікна, колір фону, прозорість та курсор.
    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 функції

    Приклади

    $(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" ) ))) $; */ ), error: function (data) ( /*....*/ ), complete: function(data) ( $(_block).unblock(); // знімаємо блокування ) )); return false; )) ;

    Ось і все, використовувати плагін jQuery BlockUI дуже просто та зручно. Більше демо прикладів є на сторінці розробника.

    Можливо, вас це зацікавить