Hur man blockerar ett element på en sida. JQuery BlockUI - blockering av en sida eller ett enskilt element på en sida


Installera Adblock Plus-tillägget i webbläsare

Först och främst, genom att gå till den officiella webbplatsen för utvecklarna av detta tillägg med den här länken adblockplus.org, kommer du att se webbplatsens huvudsida:

Här väljer vi webbläsaren du använder. Personligen använder jag webbläsaren Chrome och därför kommer knappen för att installera tillägget se ut som "Installera på Chrome". Det är tydligt att om du väljer OPERA-webbläsaren kommer du att ha en knapp "Installera på Opera"

Klicka på "Installera på Chrome" så öppnas det här fönstret framför oss:


Klicka på "Lägg till" och kom hit:


Som du kan se dök ett fönster upp i det högra hörnet med ett meddelande om installationen av Adblock Plus-tillägget och för att aktivera det måste du klicka på den röda "ABP"-ikonen. Det här kommer vi att göra - Press!

Det var allt, nu har du installerat och aktiverat tillägget för att blockera annonser på alla webbplatser.

Det här tillägget har inställningar där du kan göra personliga filter och exkludera specifika domäner. För att komma in i inställningarna måste du klicka på den röda "ABP"-ikonen och längst ner klicka på alternativet "Inställningar"


Och den experimentella webbplatsen kommer att vara bloggen telets.com.zp.ua/

Låt oss gå till en av hans artiklar genom att inaktivera Adblock Plus-tillägget.


Nu kommer jag att aktivera tillägget och det här är vad vi kommer att se:


För att stänga av blockeringen på webbplatsen måste du klicka på den röda ikonen och välja alternativet "Aktiverad på denna webbplats". För att återaktivera blockeringen måste du klicka på "Inaktiverad på denna sida"

Blockera ett element på webbplatsen

För att göra detta måste du klicka på ABP-ikonen igen och välja alternativet "Blockera element".

Efter det måste du välja valfritt element på webbplatsen och klicka på det.

Jag ska till exempel försöka blockera en bild för en artikel.

Och så klickade jag på alternativet "Lås element" och klickade sedan på bilden. Här är vad du kommer att se:


Vi ser att ett fönster har öppnats och koden med denna bild visas i det. Om vi ​​nu klickar på "Lägg till"-knappen så kommer denna kod att blockeras och kommer inte längre att visas på bloggen.Jag klickar på "Lägg till" och det här är vad vi kommer att se:


Avblockera ett objekt på webbplatsen

Nu ska jag visa dig hur du returnerar en låst vara, i vårt fall är detta en bild.

Återigen, klicka på ABP-ikonen, klicka sedan på "Inställningar", välj sedan "Personliga filter".

I fönstret med personliga filter ser du koden för bilden som vi har blockerat.


Välj all kod och klicka på "Radera". Efter det laddar du om bloggsidan och ser allt på sin plats.

I det här inlägget kommer jag att berätta hur det är väldigt enkelt och enkelt att blockera visningen av radio på LiRu-sidor i Mozilla Firefox-webbläsare och i webbläsare i Google Chrome-familjen (Chrome, Opera, Yandex, etc.).

Del 1. Blockera radion i webbläsaren Mozilla Firefox
Först måste du installera den senaste versionen av tillägget.
Nu måste du föra muspekaren över tilläggsikonen:

Tryck sedan på vänster musknapp. I rullgardinsmenyn väljer du alternativet "Filterinställningar":

Här måste du gå till fliken "Anpassade filter" (blå ram i skärmdumpen nedan):

Har du bytt? Klicka nu på "Lägg till filter" (röd ram i skärmdumpen ovan).
Klickat? Nu i formuläret som visas måste du ange "### mediametrics-radio" (utan citattecken):


Efter inmatning, glöm inte att trycka på "Enter".
Du kommer att ha ett nytt filter:


Nu måste du komma ihåg att sätta en "bocka" i rutan till vänster om den (se skärmdumpen ovan). Och klicka sedan på knappen "Stäng".
Det är det, det finns ingen mer radio på LiRu (och inte bara på LiRu förresten).

Del 2. Blockera radion i Google Chrome-familjen av webbläsare (Opera, Yandex, etc.)
För att komma igång måste du installera den senaste versionen av tillägget i din webbläsare Google Chrome, Opera eller Yandex. Men hur gör man det? Enkelt nog. Vid ett tillfälle beskrevs hela processen med att installera tillägget "Adblock Plus" för Google Chrome i meddelandet "". Där heter den första delen av meddelandet "Hur man installerar?". Jag förstår att inte alla gillar att följa länkar i meddelanden. Och många – det är så lätt att bli rädd för det i panik. Men det finns inget du kan göra åt det. Vi måste göra det, tyvärr!

Nu måste du föra muspekaren över tilläggets ikon (grön ram i skärmdumpen nedan):

Tryck sedan på vänster musknapp. I rullgardinsmenyn väljer du alternativet "Inställningar" (den blå ramen i skärmdumpen ovan).

Här måste du gå till fliken "Personliga filter":

Så du måste lägga till texten "### mediametrics-radio" till inmatningsraden (utan citattecken, den blå ramen i skärmdumpen nedan):
Blockera alla sidelement i Mozilla Firefox med Adblock Plus


Tyvärr introducerar till och med intressanta webbplatser med tiden sådana innovationer som inte bara kan irritera, utan också föra "till vit värme", som sträcker sig till dess författare. Det var så jag gjorde det med sajten http://lifehacker.ru


Jag läser den, jag får dess nyhetsbrev, men det "pirrar mig" att jag upprepade gånger uppmanas att prenumerera på nyheterna. Frågan väcktes skarpt framför mig: hur man blockerar enskilda element på webbplatsen... Lyckligtvis, som en av hjältarna i den gamla filmen sa, "fanns det bra människor ..." (filmen "Irony of Fate or Enjoy Your Bath"). Jag var tvungen att vara uppmärksam på tillägget ublock (tillägget) installerat tidigare i flera av mina webbläsare.

Webbläsartillägg och tillägg är en och samma för sitt syfte. "Bourgeois" detta motsvarar termen plugins. Skillnaden i terminologi gäller endast webbläsare. I Firefox kallas de tillägg, i Chrome och Opera kallas de för tillägg.


Så efter att ha installerat denna underbara programvara går jag till webbplatsen igen och ringer blockeringen av elementet. Detta kommando anropas av högerklickskontextmenyn på musen.



Efter det måste du markera med musen det område som du vill blockera. Det är nödvändigt att flytta markören till detta område och trycka på vänster musknapp.



Denna operation kommer att kräva viss skicklighet och övervägande av dig, men som ett resultat kommer du att få en begäran om att skapa ett filter i den nedre högra delen av sidan. I det här exemplet:


Efter att du tryckt på "Skapa"-knappen börjar filtret omedelbart att fungera. Du kan kontrollera detta genom att helt enkelt uppdatera sidan du tittar på.


Mitt humör förändrades dramatiskt till det bättre. Sjunger "Epees Bald, Nobles!" (film "D" Artagnan och de tre musketörerna), jag går till en avgörande offensiv mot andra, enligt mig, överflödiga inslag. Nu är jag "irriterad" på rätt widget för nyhetsprenumeration via e-post.
Blockeringen av detta element måste göras genom att skapa två regler: en e-postadressrad och en "Slutför"-knapp.



Efter att ha skapat dessa två filter ville jag framföra "Internationale", eftersom orden "... vi kommer att förstöra hela våldets värld till kärnan ..." mest exakt återspeglade mitt humör. Och sedan, "Och så led Ostap" (vilket betyder den ursprungliga innebörden av denna aforism) ... Kartago måste förstöras - och sedan blockerade jag widgetarna för det bästa sättet att läsa Lifehacker, läsa på Twitter, titta på YouTube och olika sociala medier nätverk:




Nu behövde jag inte längre övertala mig själv: "Lugn, bara lugn", eftersom just detta lugn inte störde någonting.


I slutändan skapade tillägget ublock (tillägget) flera regler som nu till och med kan exporteras till en fil:

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

2016-02-15, 0:03:06 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru ### mce-EMAIL

2016-02-15, 0:03:13 http://lifehacker.ru/2016/02/08/100-habits-2016/

2016-02-15, 0:03:19 http://lifehacker.ru/2016/02/08/100-habits-2016/

2016-02-15, 0:03:49 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru ### lh-fullscreen-sub__left

2016-02-15, 0:04:16 http://lifehacker.ru/2016/02/08/100-habits-2016/

2016-02-15, 0:04:55 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru ### lh_slides-2> .soc-div> .social-root> .soc-youtube.soc

2016-02-15, 0:08:17 http://lifehacker.ru/

Låt oss kontrollera hur sant antagandet är att utropstecknet tillhör kategorin "Kommentar" och innehållet i själva filtret är den andra raden i regeln. Hitta ublock i tillägg (tillägg), gå till dess "Inställningar", ring "Visa kontrollpanel" och se "Mina filter".




Låt oss ta bort dessa "extra rader" och hämta filtren:

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

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% 34.ph%p% 34.ph 23cb43% 3Dac235 26domain% 3Dlifehacker.ru% 26origin% 3Dhttp% 253A% 252F% 252Flifehacker.ru% 252Ff1d1b9113f6c558% 26origin% 3Dhttp% 253A% 252F% 252Flifehacker.ru% 252Ff1d1b9113f6c558% = 26relation% 3Dfacker höjd &% 26förälder &% 3D 20% 3D 20% 3D 20% 3D 20% 3D 20% 3D 20% 3D 20% 3D 200% % 2Fwwbook.com 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

Låt oss gå till webbplatsen http://lifehacker.ru igen och njuta av den "rena" sidan:


Av hela mitt hjärta skulle jag vilja säga ett stort mänskligt tack till författaren till denna förlängning (tillägg).


Du kanske är intresserad av detta

I den här korta artikeln vill jag prata om ett mycket bekvämt och användbart plugin med vilket du tillfälligt kan blockera hela sidan eller ett enda element på sidan.

Behovet av sådana manipulationer med sidan eller dess element uppstod när AJAX började vinna sin popularitet. Alla vet att när en AJAX-begäran exekveras så exekveras den i bakgrunden, utåt visas den inte på något sätt, och som vanligtvis är fallet förstår inte användaren vad som händer och klickar igen på en knapp eller annat element som orsakar en AJAX-förfrågan, är det stor sannolikhet att något kan gå fel). I sådana fall är det bäst att blockera användaren från att komma åt en knapp, ett formulär eller annat element så att de inte kan aktivera AJAX-händelsen igen. Och enligt min mening är jQuery BlockUI-plugin perfekt, men den kan naturligtvis användas för andra fall, beroende på vad du behöver.

Användande

Att använda insticksprogrammet är väldigt enkelt, vi ansluter jQuery och själva jQuery BlockUI-plugin-programmen, och kör sedan koden:

Du kan ändra färgen på texten och bakgrunden:

Lås hela sidan

De första exemplen har redan visat hur man blockerar hela sidan:

Upplåsning:

Låsning av ett enda element

Ta en närmare titt på samtalsfunktionen här, den är något annorlunda, men funktionsprincipen är densamma:

Upplåsning:

inställningar

Parameter Standard Parameterbeskrivning
meddelande

Vänta ...

Texten i meddelandet som visas vid blockering kan du ange taggar.
titel null Ställer in titeln på blockeringsfönstret. Den här inställningen fungerar bara om inställningen är aktiverad. tema
dragbar Sann Låt oss dra det blockerande fönstret med muspekaren. Den här inställningen fungerar bara om inställningen är aktiverad. tema
tema falsk Inkluderar visuellt tema och funktionalitet från jQuery UI. För vissa kan det vara en användbar funktion, men jag gillar det inte, så att allt visas korrekt kommer du också behöva koppla UI-skript och stilar.
css

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

css: (
stoppning: 0,
marginal: 0,
bredd: "30%",
top: "40%",
vänster: "35%",
textAlign: "center",
färg: "# 000",
border: "3px solid #aaa",
bakgrundsfärg: "#fff",
markör: "vänta"
}

De visuella inställningarna för blockeringsfönstret, standardparametrarna är bra.
temaCSS Den här inställningen styr bakgrunden för det blockerande fönstret, bakgrundsfärg, transparens och markör.
markörÅterställ 'Standard' Inte helt tydlig inställning, att döma av experiment, justerar den markörtypen vid upplåsningstillfället.
growlCSS

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

growlCSS: (
bredd: "350px",
topp: "10px",
vänster: "",
höger: "10px",
border: "ingen",
utfyllnad: "5px",
opacitet: 0,6,
markör: null,
färg: "#fff",
bakgrundsfärg: "# 000",
"-webkit-border-radius": "10px",
"-moz-border-radius": "10px"
} ,

Anpassar utseendet på snabbmeddelanden. Mer om detta på demosidan, kallad av koden: $ .growlUI ('Titel', 'Text!');
iframeSrc js kod Att döma av beskrivningen från dokumentationen gör inställningen något när den fungerar i äldre IE-webbläsare.
forceIframe falsk Relaterat till inställningen ovan.
baseZ 1000 Justerar positionen för det blockerande lagret längs Z-axeln.
centerX och centerY Sann Centrerar blockeringsfönstret.
allowBodyStretch Sann En annan inställning som inte visade mycket effekt är troligen avsedd för äldre IE-webbläsare.
bindEvents Sann Blockerar musklick.
constrainTabKey Sann Blocker Tabpress<./td>
tona in 200 Animationshastighet när den skapas.
tona ut 400 Animationshastighet när den är dold.
Paus 0 När den angivna tiden har förflutit släpper den automatiskt låset.
showOverlay Sann Inaktiverar överlagringen av bakgrunden bakom blockeringsfönstret.
focusInput Sann Att döma av beskrivningen i dokumentationen ska den ställa in markören och det första tomma textfältet på sidan.
blockMsgClass 'BlockMsg' CSS-klassen för blockeringsfönstret.
ignoreIfBlocked falsk Om elementet eller sidan redan är blockerad blockerar vi det inte igen.
quirksmodeOffsetHack 4 någon sorts obegriplig hemlig miljö som de inte ens skriver något om i dokumentationen))

CallBack-funktioner

Exempel på

$ (dokument) .on ("skicka", ".form_submit", funktion () (_this = $ (detta); _block = _this; // börja blockera elementet // i mitt fall är hela formuläret blockerat så att det inte kan skickas igen $ (_ block) .block ((meddelande: " ", // bara en animerad ikon, ingen textöverlagringCSS: (bakgrundsfärg:" #fff ", opacitet: 0.8, markör:" vänta "), css: (kant: 0, utfyllnad: 0, bakgrundsfärg:" transparent ")) ); $ .ajax ((url: _this.attr ("action"), typ: "POST", data: _this.serialize (), dataType: "JSON", success: function (data) (/ * ... . * /), fel: funktion (data) (/*....*/), komplett: funktion (data) ($ (_ block) .unblock (); // unlock))); return false;) );

Det är det, att använda jQuery BlockUI-plugin är väldigt enkelt och bekvämt. Fler demoexempel finns på utvecklarsidan.

Du kanske är intresserad av detta







2021 gtavrl.ru.