Blocați un element de pe pagină. JQuery BlockUI - blocarea unei pagini sau a unui element individual dintr-o pagină. Blocați întreaga pagină

04.03.2020 Știri


Din păcate, chiar și site-urile web interesante introduc de-a lungul timpului inovații care nu numai că pot irita, dar pot duce și la o „căldură albă” care se extinde la autorii săi. Așa mi-a funcționat cu site-ul http://lifehacker.ru


L-am citit, primesc newsletter-ul lui, dar mă „înfurie” că mă sună iar și iar să mă abonez la știri. M-am confruntat cu o întrebare presantă: cum să blocați elemente individuale de pe un site web. Din fericire, așa cum spunea unul dintre eroii vechiului film, „s-au găsit oameni buni...” (filmul „Ironia destinului sau Bucură-te de baie”). A trebuit să fiu atent la extensia (extensia) ublock instalată anterior în câteva dintre browserele mele.

Extensiile de browser și suplimentele servesc aceluiași scop. „Într-un mod burghez” aceasta corespunde termenului de pluginuri. Diferența de terminologie se aplică doar browserelor. În Firefox se numesc add-on-uri, în Chrome și Opera se numesc extensii.


Așa că, după ce instalez acest minunat software, merg din nou pe site și provoc blocarea elementului. Această comandă este apelată din dreapta meniul contextual soareci.



După aceasta, va trebui să indicați cu mouse-ul zona care trebuie blocată. Trebuie să mutați cursorul în această zonă și să faceți clic butonul din stanga soareci.



Această operațiune va necesita oarecare abilități și considerație din partea dvs., dar ca rezultat, în partea din dreapta jos a paginii veți primi o solicitare de a crea un filtru. În acest exemplu:


După ce faceți clic pe butonul „Creați”, filtrul va începe imediat să funcționeze. Puteți verifica acest lucru actualizare simplă pagina care este vizualizată.


Starea mea de spirit s-a schimbat dramatic partea mai buna. Scandând „Săbii scoase, nobili!” (filmul „D”Artagnan și cei trei mușchetari”), merg la o ofensivă decisivă împotriva altor elemente, după părerea mea, inutile. Acum sunt „enervat” de widget-ul potrivit pentru abonarea la știri prin e-mail.
Blocarea acestui element trebuia făcută prin crearea a două reguli: linia adresa de e-mail și butonul „Terminat”.



După ce am creat aceste două filtre, am vrut să interpretez „The Internationale”, deoarece cuvintele „... vom distruge întreaga lume a violenței la pământ...” reflectau cel mai bine starea mea de spirit. Și apoi, „Și apoi Ostap a suferit” (adică sensul inițial al acestui aforism)... Cartagina trebuie distrusă - și apoi widget-urile au fost blocate de mine cel mai bun mod citește Lifehacker, citește pe Twitter, urmărește pe YouTube și pe diverse rețele sociale:




Acum nu mai aveam nevoie să mă conving: „Calm, doar calm”, deoarece tocmai acest calm nu deranja nimic.


În cele din urmă, extensia ublock (supliment) a creat mai multe reguli care pot fi acum chiar exportate într-un fișier:

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/

Să verificăm cât de adevărată este presupunerea că semnul exclamării aparține categoriei „Comentariu”, iar conținutul filtrului în sine este a doua linie a regulii. Să găsim ublock în extensii (suplimente), să mergem la „Setări”, să apelăm „Afișează panoul de control” și să ne uităm la „Filtrele mele”.




Să eliminăm aceste „linii suplimentare” și să obținem filtre:

Lifehacker.ru###lh-fullscreen-sub__left > p

Lifehacker.ru###mce-EMAIL

Lifehacker.ru###mc-embedded-subscribe

Lifehacker.ru###lh-fullscreen-sub__nu-acum

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 ECT%2FXD_ARBITER.PHP%3fversion%3D42%23CB%3DF242B43CAC35A2% 26domain%3Dlifehacker.ru%26origin%3Dhttp%253A%252Flifehacker%251f251f251f251f251f1f25b 8 %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=width=show_head5&show_show

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

Să mergem din nou pe site-ul http://lifehacker.ru și să ne bucurăm de pagina „curată”:


Din tot sufletul aș dori să îi mulțumesc autorului acestei extensii (adăugare).


Instalare Extensii Adblock Plus pe browsere

În primul rând, când accesați site-ul oficial al dezvoltatorilor acestei extensii folosind acest link adblockplus.org, veți vedea pagina principala site:

Aici selectăm browserul pe care îl utilizați. Eu personal folosesc browser Chromeși, prin urmare, butonul meu pentru a instala extensia va arăta astfel „Instalare pe Chrome”. Este clar că dacă alegi browser OPERA, apoi veți avea un buton „Instalare pe Opera”

Faceți clic pe „Instalați pe Chrome” și se va deschide această fereastră în fața noastră:


Faceți clic pe „Adăugați” și ajungeți aici:


După cum puteți vedea, în colțul din dreapta a apărut o fereastră cu un mesaj despre instalarea extensiei Adblock Plus și pentru a o activa va trebui să faceți clic pe pictograma roșie „ABP”. Asta vom face - Apăsați!

Gata, acum ai extensia instalată și activată pentru a bloca reclamele pe toate site-urile.

Această extensie are setări în care puteți face filtre personale și puteți exclude anumite domenii. Pentru a intra în setări, trebuie să faceți clic pe pictograma roșie „ABP” și în partea de jos faceți clic pe opțiunea „Setări”.


Iar site-ul experimental va fi blogul telets.com.zp.ua/

Să mergem la unul dintre articolele sale dezactivând extensia Adblock Plus.


Acum voi activa extensia și iată ce vom vedea:


Pentru a dezactiva blocarea pe un site, trebuie să faceți clic pe pictograma roșie și să selectați opțiunea „Activat pe acest site”. Pentru a activa din nou blocarea, trebuie să faceți clic pe „Dezactivat pe acest site”

Blocați un element de pe site

Pentru a face acest lucru, faceți din nou clic pe pictograma ABP și selectați opțiunea „Element de blocare”.

După aceasta, va trebui să selectați orice element de pe site și să faceți clic pe el.

De exemplu, voi încerca să blochez imaginea pentru articol.

Și așa am dat clic pe opțiunea „Element de blocare” și după aceea am dat clic pe imagine. Iată ce vei vedea:


Vedem că s-a deschis o fereastră și în ea apare un cod cu această imagine. Dacă facem acum clic pe butonul „Adăugați”, acest cod va fi blocat și nu va mai fi afișat pe blog.Dau clic pe „Adăugați” și iată ce vom vedea:


Deblocați un element de pe site

Acum vă voi arăta cum să returnați un element blocat, în cazul nostru este o imagine.

Din nou, faceți clic pe pictograma ABP, apoi faceți clic pe „Setări”, apoi selectați „Filtre personale”.

În fereastra cu filtre personale vei vedea codul imaginii pe care am blocat-o.


Selectați tot codul și faceți clic pe „Șterge”. După aceea, reîncărcăm pagina de blog și vedem totul la locul său.

În acest mesaj vă voi spune cum să blocați foarte ușor și simplu afișarea radio pe paginile LiRu din browsere Mozilla Firefoxși în browserele familiei Google Chrome(Chrome, Opera, Yandex etc.).

Partea 1. Blocarea radioului browser Mozilla Firefox
Pentru început trebuie să pui ultima versiune extensii.
Acum trebuie să treceți mouse-ul peste pictograma extensiei:

Apoi faceți clic pe butonul stâng al mouse-ului. În meniul derulant, selectați „Setări filtru”:

Aici trebuie să accesați fila „Filtre personalizate” (cadru albastru din captura de ecran de mai jos):

Ai trecut mai departe? Acum faceți clic pe „Adăugați filtru” (cadru roșu în captura de ecran de mai sus).
Ai dat click? Acum, în formularul care apare trebuie să introduceți „###mediametrics-radio” (fără ghilimele):


După ce ați intrat, nu uitați să apăsați „Enter”.
Vei avea un filtru nou:


Acum trebuie să vă amintiți să bifați caseta din stânga acesteia (vezi captura de ecran de mai sus). Și apoi faceți clic pe butonul „Închidere”.
Gata, nu mai există radio pe LiRu (și nu doar pe LiRu, de altfel).

Partea 2. Blocarea radioului în familia de browsere Google Chrome (Opera, Yandex etc.)
În primul rând, trebuie să instalați cea mai recentă versiune a extensiei în dvs browser Google Chrome, Opera sau Yandex. Dar cum să faci asta? Destul de simplu. La un moment dat, întregul proces de instalare a extensiei „Adblock Plus” pentru Google Chrome a fost descris în mesajul „”. Acolo, prima parte a mesajului se numește „Cum se instalează?”. Înțeleg că nu tuturor le place să facă clic pe linkuri din mesaje. Și multora le este atât de frică de asta. Dar nu poți face nimic în privința asta. Va trebui să facem asta, vai!

Acum trebuie să treceți mouse-ul peste pictograma extensiei (cadru verde în captura de ecran de mai jos):

Apoi faceți clic pe butonul stâng al mouse-ului. În meniul derulant, selectați „Setări” (cadru albastru din captura de ecran de mai sus).

Aici trebuie să accesați fila „Filtre personale”:

Deci, trebuie să adăugați textul „###mediametrics-radio” la linia de intrare (fără ghilimele, cadru albastru în captura de ecran de mai jos):
Blocați orice element de pagină în Mozilla Firefox folosind Adblock Plus

S-ar putea să fiți interesat de asta

În acest scurt articol vreau să vorbesc despre un plugin foarte convenabil și util cu care poți bloca temporar o pagină întreagă sau un element individual dintr-o pagină.

Necesitatea unor astfel de manipulări cu pagina sau elementele acesteia a apărut atunci când AJAX a început să-și câștige popularitatea. Toată lumea știe că atunci când o solicitare AJAX este executată, aceasta este executată în fundal, extern nu este afișat în niciun fel și, așa cum se întâmplă de obicei, utilizatorul nu înțelege ce se întâmplă și dă din nou clic pe butonul sau alt element care provoacă o solicitare AJAX, există o mare probabilitate ca ceva să meargă prost ). În astfel de cazuri, cel mai bun lucru de făcut este să blocați accesul utilizatorului la buton, formular sau alt element, astfel încât să nu poată declanșa din nou evenimentul AJAX. Și după părerea mea plugin jQuery BlockUI este ideal, dar bineînțeles că poate fi folosit și pentru alte cazuri, în funcție de ceea ce aveți nevoie.

Utilizare

Folosirea pluginului este foarte simplă, conectăm jQuery și pluginurile jQuery BlockUI în sine, apoi executăm codul:

Puteți schimba textul și culoarea de fundal:

Blocați întreaga pagină

Primele exemple au arătat deja cum să blocați o pagină întreagă:

Deblocare:

Blocarea unui element individual

Aici, uitați-vă cu atenție la funcția de apel, este ușor diferită, dar principiul de funcționare este similar:

Deblocare:

Setări

Parametru Mod implicit Descrierea parametrilor
mesaj

Va rugam asteptati…

Textul mesajului care este afișat atunci când este blocat poate fi specificat folosind etichete.
titlu nul Setează titlul ferestrei de blocare. Această setare funcționează numai dacă setarea este activată temă
trasabil Adevărat Vă permite să trageți fereastra de blocare cu cursorul mouse-ului. Această setare funcționează numai dacă setarea este activată temă
temă fals Include o temă vizuală și o funcționalitate din jQuery UI. Pentru unii poate fi caracteristică utilă, dar nu-mi place; pentru ca totul să fie afișat corect, va trebui, de asemenea, să conectați scripturile și stilurile UI.
css

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

css: (
umplutură: 0
marja: 0,
lățime: "30%" ,
sus: "40%",
stânga: "35%" ,
textAlign: „centru” ,
culoare: "#000" ,
chenar: „3px solid #aaa” ,
Culoare de fundal: „#fff” ,
cursor: "așteptați"
}

Setări vizuale ale ferestrei de blocare, parametri standard destul de potrivit.
tematică CSS Această setare controlează fundalul, culoarea de fundal, transparența și cursorul ferestrei de blocare.
cursorReset 'Mod implicit' Setarea nu este complet clară, dar judecând după experimente, reglează tipul de cursor în momentul în care blocarea este eliberată.
mârâiCSS

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

mârâitCSS: (
lățime: "350px" ,
sus: „10px” ,
stânga: "" ,
dreapta: "10px" ,
chenar: „niciunul” ,
umplutură: „5px” ,
opacitate: 0,6,
cursor: nul
culoare: „#fff” ,
Culoare de fundal: „#000” ,
"-webkit-border-radius" : "10px" ,
„-moz-border-radius” : „10px”
} ,

Configurați aspect mesaje rapide. Mai multe detalii despre aceasta pe pagina demo, numită prin cod: $.growlUI('Titlu', 'Text!');
iframeSrc codul js Judecând după descrierea din documentație, setarea face ceva atunci când funcționează în browserele IE mai vechi.
forceIframe fals Legat de setarea de mai sus.
bazaZ 1000 Reglează poziția stratului de blocare de-a lungul axei Z.
centruXȘi centruY Adevărat Centrează fereastra de blocare.
permitBodyStretch Adevărat O altă setare care nu a arătat prea mult efect este cel mai probabil destinată browserelor IE mai vechi.
bindEvents Adevărat Blochează clicurile butonului mouse-ului.
constrainTabKey Adevărat Se blochează apăsând tasta Tab<./td>
fadeIn 200 Viteza animației la apariție.
fadeOut 400 Viteza animației când se ascunde.
pauză 0 După expirarea timpului specificat, blocarea este eliberată automat.
showOverlay Adevărat Dezactivează suprapunerea de fundal în spatele unei ferestre de blocare.
focusInput Adevărat Judecând după descrierea din documentație, ar trebui să seteze cursorul și primul câmp de text gol din pagină.
blockMsgClass „blockMsg” Blocarea clasei CSS a ferestrei.
ignoreIfBlocked fals Dacă un element sau o pagină este deja blocată, nu o blocăm din nou.
quirksmodeOffsetHack 4 un fel de neînțeles setare secretă despre care nici măcar nu scriu nimic în documentație))

Funcții de apel invers

Exemple

$(document).on("trimite" , ".form_submit" , funcția () ( _this = $(this ) ; _block = _this; // începe să blochezi elementul // în cazul meu, întregul formular este blocat astfel încât să nu poată fi trimis din nou $(_block).block(( mesaj: " ", //doar o pictogramă animată, fără text overlayCSS: ( backgroundColor: "#fff", opacitate: 0.8, cursor: "wait"), css: (bord: 0, padding: 0, backgroundColor: "transparent") ) ); $.ajax(( url: _this.attr("acțiune"), tip: "POST", date: _this.serialize(), dataType: "JSON", succes: funcție (date) ( /*... . */ ), eroare: function (date) ( /*....*/ ), complete: function(data) ( $(_block).unblock(); // elimina blocarea ) )); return false; )) ;

Asta e tot, utilizarea pluginului jQuery BlockUI este foarte simplă și convenabilă. Există mai multe exemple demo pe pagina dezvoltatorului.

S-ar putea să fiți interesat de asta