###
  • Programi
  • Sigurnost
  • Vijesti
  • Zanimljiv
  • Savjet
  • Vijesti
  • Recenzije

    • Blokirajte element na stranici. JQuery BlockUI - blokiranje stranice ili pojedinačnog elementa na stranici. Zaključaj cijelu stranicu

    04.03.2020 Vijesti


    Jao, čak i zanimljive web stranice s vremenom uvode inovacije koje ne samo da mogu iritirati, već i dovesti do "bijele vrućine" koja se proteže na njihove autore. Ovako mi je ispalo sa stranicom http://lifehacker.ru


    Čitam ga, primam njegov newsletter, ali me “ljuti” što me stalno iznova zovu da se pretplatim na vijesti. Suočio sam se s gorućim pitanjem: kako blokirati pojedinačne elemente na web stranici. Srećom, kako reče jedan od junaka starog filma, “dobri ljudi su se našli...” (film “Ironija sudbine ili Uživajte u kupanju”). Morao sam obratiti pozornost na ublock dodatak (ekstenziju) prethodno instaliran u nekoliko mojih preglednika.

    Proširenja i dodaci preglednika služe istoj svrsi. "Na buržoaski način" to odgovara izrazu plugins. Razlika u terminologiji odnosi se samo na preglednike. U Firefoxu se zovu dodaci, u Chromeu i Operi proširenja.


    Dakle, nakon instaliranja ovog prekrasnog softvera, ponovno odlazim na stranicu i uzrokujem blokiranje elementa. Ova se naredba poziva s desne strane kontekstni izbornik miševi.



    Nakon toga, morat ćete pokazati mišem područje koje treba blokirati. Morate pomaknuti kursor na ovo područje i kliknuti lijevi gumb miševi.



    Ova operacija će zahtijevati određenu vještinu i razmatranje s vaše strane, ali kao rezultat toga, u donjem desnom dijelu stranice dobit ćete zahtjev za stvaranje filtra. U ovom primjeru:


    Nakon što kliknete gumb "Stvori", filtar će odmah početi raditi. Možete provjeriti ovo jednostavno ažuriranje stranica koja se gleda.


    Raspoloženje mi se dramatično promijenilo bolja strana. Skandiranje "Izukani mačevi, plemići!" (film "D"Artagnan i tri mušketira"), krećem u odlučnu ofenzivu protiv ostalih, po mom mišljenju, nepotrebnih elemenata. Sada me "smeta" desni widget za pretplatu na vijesti putem e-pošte.
    Blokiranje ovog elementa moralo se izvršiti kreiranjem dvaju pravila: retka za adresu e-pošte i gumba "Gotovo".



    Nakon što sam napravio ova dva filtera, poželio sam izvesti “Internacionalu”, budući da su riječi “... uništit ćemo do temelja cijeli svijet nasilja...” najtočnije odražavale moje raspoloženje. A onda, “I tada je Ostap stradao” (što znači izvorno značenje ovog aforizma)... Kartaga mora biti uništena - a onda sam widgete blokirao ja najbolji načinčitajte Lifehacker, čitajte na Twitteru, gledajte na YouTubeu i raznim društvenim mrežama:




    Sada više nisam trebao samu sebe uvjeravati: “Mirno, samo mirno”, jer ta smirenost ništa nije poremetila.


    U konačnici, ekstenzija ublock (dodatak) stvorila je nekoliko pravila koja se sada čak mogu izvesti u datoteku:

    15.02.2016, 0:02:44 http://lifehacker.ru/2016/02/08/100-habits-2016/
    >str

    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/

    Provjerimo koliko je istinita pretpostavka da uskličnik pripada kategoriji “Komentar”, a da je sam sadržaj filtera drugi redak pravila. Pronađimo ublock u proširenjima (dodacima), idimo na njegove "Postavke", pozovimo "Prikaži upravljačku ploču" i pogledajmo "Moji filtri".




    Uklonimo ove "suvišne linije" i nabavimo filtre:

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

    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 ECT%2FXD_ARBITER.PHP%3fversion%3D42%23CB%3DF242B43CAC35A2% 26domain%3Dlifehacker.ru%26origin%3Dhttp%253A%252F%252Flifehacker.ru%252Ff1d1b9 113f6c558 %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

    Idemo opet na stranicu http://lifehacker.ru i uživajmo u "čistoj" stranici:


    Od sveg srca želim reći veliko hvala autoru ovog proširenja (dodatka).


    Montaža Adblock proširenja Plus na preglednicima

    Prije svega, kada odete na službenu web stranicu programera ovog proširenja pomoću ove veze adblockplus.org, vidjet ćete početna stranica web stranica:

    Ovdje odabiremo preglednik koji koristite. Osobno koristim Chrome preglednik i stoga će moj gumb za instaliranje proširenja izgledati ovako "Instaliraj na Chrome". Jasno je da ako odaberete OPERA preglednik, tada ćete imati gumb "Instaliraj na Operi"

    Kliknite na “Instaliraj na Chrome” i pred nama će se otvoriti ovaj prozor:


    Kliknite na "Dodaj" i dođite ovdje:


    Kao što vidite, u desnom kutu pojavio se prozor s porukom o instaliranju ekstenzije Adblock Plus, a za aktivaciju je potrebno kliknuti na crvenu ikonu “ABP”. Ovo ćemo učiniti - Press!

    To je to, sada imate instalirano i aktivirano proširenje za blokiranje oglasa na svim stranicama.

    Ovo proširenje ima postavke u kojima možete napraviti osobne filtre i isključiti određene domene. Da biste ušli u postavke potrebno je kliknuti na crvenu ikonu “ABP” i pri dnu kliknuti na opciju “Postavke”


    A eksperimentalna stranica bit će blog telets.com.zp.ua/

    Idemo na jedan od njegovih članaka tako da onemogućimo ekstenziju Adblock Plus.


    Sada ću aktivirati ekstenziju i vidjet ćemo ovo:


    Kako biste isključili blokiranje na nekoj stranici, potrebno je kliknuti na crvenu ikonu i odabrati opciju “Omogućeno na ovoj stranici”. Kako biste ponovno omogućili blokiranje, morate kliknuti na “Onemogućeno na ovoj stranici”

    Blokirajte element na stranici

    Da biste to učinili, ponovno kliknite na ikonu ABP i odaberite opciju "Blokiraj element".

    Nakon toga morat ćete odabrati bilo koji element na web mjestu i kliknuti na njega.

    Na primjer, pokušat ću blokirati sliku za članak.

    I tako sam kliknuo na opciju "Blokiraj element" i nakon toga kliknuo na sliku. Evo što ćete vidjeti:


    Vidimo da se otvorio prozor i u njemu se pojavljuje kod s ovom slikom. Ako sada kliknemo na gumb "Dodaj", ovaj kod će biti blokiran i više se neće prikazivati ​​na blogu.Kliknem na "Dodaj" i vidjet ćemo ovo:


    Deblokirajte element na stranici

    Sada ću vam pokazati kako vratiti blokirani element, u našem slučaju to je slika.

    Ponovno kliknite na ikonu ABP, zatim kliknite na "Postavke", zatim odaberite "Osobni filtri".

    U prozoru s osobnim filterima vidjet ćete šifru slike koju smo blokirali.


    Odaberite sve kodove i kliknite na "Izbriši". Nakon toga ponovno učitavamo stranicu bloga i vidimo sve na svom mjestu.

    U ovoj poruci ću vam reći kako vrlo lako i jednostavno blokirati prikaz radija na LiRu stranicama u preglednicima Mozilla Firefox iu preglednicima obitelji Google Chrome(Chrome, Opera, Yandex itd.).

    Dio 1. Blokiranje radija Mozilla preglednik Firefox
    Za početak morate staviti Najnovija verzija proširenja.
    Sada trebate prijeći mišem preko ikone proširenja:

    Zatim kliknite na lijevu tipku miša. U padajućem izborniku odaberite "Postavke filtra":

    Ovdje morate otići na karticu "Prilagođeni filtri" (plavi okvir na slici ispod):

    Jeste li krenuli dalje? Sada kliknite "Dodaj filtar" (crveni okvir na gornjoj snimci zaslona).
    Jeste li kliknuli? Sada u obrazac koji se pojavi trebate unijeti "###mediametrics-radio" (bez navodnika):


    Nakon unosa ne zaboravite pritisnuti "Enter".
    Imat ćete novi filter:


    Sada se morate sjetiti označiti okvir s lijeve strane (pogledajte snimak zaslona iznad). Zatim kliknite na gumb "Zatvori".
    To je to, radija na LiRu više nema (i ne samo na LiRu, usput).

    Dio 2. Blokiranje radija u obitelji preglednika Google Chrome (Opera, Yandex itd.)
    Najprije morate instalirati najnoviju verziju proširenja u svoj Google preglednik Chrome, Opera ili Yandex. Ali kako to učiniti? Dovoljno jednostavno. Svojedobno je cijeli proces instaliranja ekstenzije "Adblock Plus" za Google Chrome opisan u poruci "". Tamo se prvi dio poruke zove “Kako instalirati?”. Razumijem da ne vole svi klikati na poveznice u porukama. A mnogi se jednostavno toga boje. Ali tu ne možete ništa učiniti. Morat ćemo to učiniti, nažalost!

    Sada trebate prijeći mišem preko ikone proširenja (zeleni okvir na snimci zaslona u nastavku):

    Zatim kliknite na lijevu tipku miša. U padajućem izborniku odaberite "Postavke" (plavi okvir na gornjoj snimci zaslona).

    Ovdje morate otići na karticu "Osobni filtri":

    Dakle, trebate dodati tekst “###mediametrics-radio” u red za unos (bez navodnika, plavi okvir na slici ispod):
    Blokirajte bilo koji element stranice u Mozilla Firefoxu koristeći Adblock Plus

    Ovo bi vas moglo zanimati

    U ovom kratkom članku želim govoriti o vrlo praktičnom i korisnom dodatku s kojim možete privremeno blokirati cijelu stranicu ili pojedinačni element na stranici.

    Potreba za takvim manipulacijama sa stranicom ili njezinim elementima pojavila se kada je AJAX počeo dobivati ​​svoju popularnost. Svi znaju da kada se izvrši AJAX zahtjev, on se izvršava pozadina, izvana se ne prikazuje ni na koji način i, kao što je obično slučaj, korisnik ne razumije što se događa i ponovno klikne na gumb ili drugi element koji uzrokuje AJAX zahtjev, velika je vjerojatnost da nešto može poći po zlu ). U takvim slučajevima najbolje je blokirati korisnikov pristup gumbu, obrascu ili drugom elementu tako da ne mogu ponovno pokrenuti AJAX događaj. I po mom mišljenju jQuery dodatak BlockUI je idealan, ali naravno može se koristiti i za druge slučajeve, ovisno o tome što vam treba.

    Korištenje

    Korištenje dodatka je vrlo jednostavno, povezujemo jQuery i sam jQuery BlockUI dodatak, zatim izvršavamo kod:

    Možete promijeniti tekst i boju pozadine:

    Zaključaj cijelu stranicu

    Prvi primjeri su već pokazali kako blokirati cijelu stranicu:

    Otključati:

    Zaključavanje pojedinog elementa

    Ovdje pažljivo pogledajte funkciju poziva, malo je drugačija, ali princip rada je sličan:

    Otključati:

    postavke

    Parametar Zadano Opis parametra
    poruka ‘

    Molimo pričekajte…

    ’     		Tekst poruke koji se prikazuje kada je blokiran može se odrediti pomoću oznaka.
    titula ništavan Postavlja naslov prozora za blokiranje. Ova postavka radi samo ako je postavka omogućena tema
    povlačeći se pravi Omogućuje povlačenje blokirajućeg prozora kursorom miša. Ova postavka radi samo ako je postavka omogućena tema
    tema lažno Uključuje vizualnu temu i funkcionalnost iz jQuery korisničkog sučelja. Za neke može biti korisna značajka, ali ne sviđa mi se, da bi sve bilo ispravno prikazano morat ćete također povezati UI skripte i stilove.
    css

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

    css: (
    ispuna: 0
    margina: 0,
    širina: "30%",
    vrh: "40%" ,
    lijevo: "35%" ,
    textAlign: "centar" ,
    boja: "#000",
    rub: "3px solid #aaa" ,
    boja pozadine: "#fff" ,
    pokazivač: "čekaj"
    }

    		Vizualne postavke prozora za blokiranje, standardni parametri sasvim prikladno.
    themedCSS Ova postavka kontrolira pozadinu prozora za blokiranje, boju pozadine, prozirnost i kursor.
    kursorReset 'zadano' Postavka nije sasvim jasna, ali sudeći po eksperimentima, regulira tip pokazivača u trenutku otpuštanja brave.
    growlCSS

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

    growlCSS: (
    širina: "350px" ,
    vrh: "10px" ,
    lijevo: "",
    desno: "10px" ,
    granica: "ništa",
    padding: "5px" ,
    neprozirnost: 0,6,
    kursor: nula
    boja: "#fff",
    boja pozadine: "#000",
    "-webkit-border-radius" : "10px" ,
    "-moz-border-radius" : "10px"
    } ,

    		Konfigurira izgled brze poruke. Više detalja o tome na demo stranici, koja se naziva kodom: $.growlUI('Naslov', 'Tekst!');
    iframeSrc js kod Sudeći prema opisu iz dokumentacije, postavka radi nešto kada radi u starijim IE preglednicima.
    forceIframe lažno Povezano s gornjom postavkom.
    bazaZ 1000 Podešava položaj blokirajućeg sloja duž Z osi.
    centarX I centarY pravi Centriranje prozora za blokiranje.
    dopusti Istezanje Tijela pravi Druga postavka koja nije pokazala veliki učinak najvjerojatnije je namijenjena starijim IE preglednicima.
    bindEvents pravi Blokira klikove gumba miša.
    constrainTabKey pravi Blokira pritisak tipke Tab<./td>
    nestati u 200 Brzina animacije prilikom pojavljivanja.
    izblijediti 400 Brzina animacije pri skrivanju.
    pauza 0 Nakon isteka navedenog vremena, brava se automatski otpušta.
    showOverlay pravi Onemogućuje pozadinski sloj iza blokirajućeg prozora.
    focusInput pravi Sudeći prema opisu u dokumentaciji, trebao bi postaviti kursor i prvo prazno tekstualno polje na stranici.
    blockMsgClass 'blockMsg' Klasa CSS prozora za blokiranje.
    ignoreIfBlocked lažno Ako je element ili stranica već blokirana, nećemo je ponovno blokirati.
    quirksmodeOffsetHack 4 nekakav neshvatljiv tajna postavka o čemu čak i ne pišu ništa u dokumentaciji))

    Funkcije povratnog poziva

    Primjeri

    $(dokument).on("submit" , ".form_submit" , function () ( _this = $(this) ; _block = _this; // počnite blokirati element // u mom slučaju cijeli obrazac je blokiran tako da se ne može ponovno poslati $(_block).block(( message: " ", //samo animirana ikona, bez prekrivanja tekstaCSS: (Boja pozadine: "#fff", neprozirnost: 0,8, pokazivač: "čekaj"), css: (obrub: 0, ispuna: 0, Boja pozadine: "transparent" ) ) ) ; $.ajax(( url: _this.attr("akcija"), tip: "POST", podaci: _this.serialize(), dataType: "JSON", uspjeh: funkcija (podaci) ( /*... . */ ), pogreška: funkcija (podaci) ( /*....*/), dovršeno: funkcija (podaci) ( $(_block).unblock(); // uklonite blokiranje ) )); return false; )) ;

    To je sve, korištenje dodatka jQuery BlockUI vrlo je jednostavno i praktično. Postoji više demo primjera na stranici programera.

    Ovo bi vas moglo zanimati