Egy elem letiltása az oldalon. jQuery BlockUI – egy oldal vagy az oldalon lévő egyes elemek blokkolása. Az egész oldal blokkolása
Sajnos, még az érdekes oldalakon is olyan újításokat vezetnek be, amelyek nemcsak irritálhatják, hanem „fehér lángra” is hatnak, ami a szerzőkre vonatkozik. Így csináltam a http://lifehacker.ru oldallal
Elolvasom, megkapom a hírlevelét, de "feldühít" a tény, hogy újra és újra hívnak, hogy iratkozzam fel a hírekre. A kérdés ott volt előttem: hogyan lehet blokkolni az egyes elemeket a webhelyen. Szerencsére, ahogy a régi film egyik hőse mondta: "voltak, voltak jó emberek..." ("A sors iróniája vagy élvezd a fürdőt" film). Figyelnem kellett több böngészőmben korábban telepített ublock kiegészítőre (kiterjesztésre).
A böngésző bővítményei és kiegészítői, céljuk szerint, egyek. A "Bourgeois" a plug-inek kifejezésnek felel meg. A terminológiai különbség csak a böngészőkre vonatkozik. A Firefoxban ezeket bővítményeknek, a Chrome-ban és az Operában bővítményeknek hívják.
Tehát ennek a csodálatos szoftvernek a telepítése után újra felmegyek a webhelyre, és blokkolom az elemet. Ezt a parancsot a jobb oldalon hívják helyi menü egerek.
Ezt követően meg kell adnia az egérrel a blokkolni kívánt területet. Vigye a kurzort erre a területre, és kattintson bal gomb egerek.
Ez a művelet némi jártasságot és megfontolást igényel Öntől, de ennek eredményeként az oldal jobb alsó részében egy szűrő létrehozására vonatkozó kérést kap. Ebben a példában:
Miután rákattintott a "Létrehozás" gombra, a szűrő azonnal működésbe lép. Ellenőrizheti egy egyszerű frissítés a megtekintett oldal.
A hangulatom drasztikusan megváltozott jobb oldala. Éneklő "Kivont kardok, nemesek!" ("D" Artagnan és a három testőr" című film), döntő offenzívára indulok más, véleményem szerint felesleges elemek ellen. Most "bosszant" a megfelelő e-mail-előfizetési widget.
Ennek az elemnek a blokkolását két szabály létrehozásával kellett megtenni: az E-mail cím sorát és a „Kész” gombot.
E két szűrő megalkotása után már szerettem volna előadni a The Internationale-t, hiszen a hangulatomat leginkább a "... földig romboljuk az erőszak egész világát..." szavak tükrözték. És akkor: "És aztán Osztap szenvedett" (az aforizma eredeti jelentését jelenti) ... Karthágót el kell pusztítani - és akkor blokkoltam a kütyüket Jobb út olvassa el a Lifehackert, olvassa el a Twitteren, nézze meg a YouTube-on és a különböző közösségi hálózatokon:
Most már nem kellett rábeszélnem magam: "Nyugalom, csak nyugalom", hiszen ez a nyugalom nem zavart semmit.
Végül az ublock kiterjesztés (bővítmény) több olyan szabályt hozott létre, amelyek mostantól akár fájlba is exportálhatók:
2016.02.15., 0:02:44 http://lifehacker.ru/2016/02/08/100-habits-2016/
> o
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/
Ellenőrizzük, hogy helyes-e az a feltételezés, hogy a felkiáltójel a "Megjegyzés" kategóriába tartozik, és maga a szűrő tartalma a szabály második sora. Keresse meg az ublock elemet a bővítményekben (bővítmények), lépjen a "Beállításokba", hívja a "Vezérlőpult megjelenítése" lehetőséget, és nézze meg a "Saját szűrők" részt.
Távolítsuk el ezeket az "extra sorokat", és szerezzük be a szűrőket:
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.php3%DFcversion2%24%4 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%2Fhacklife 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
Menjünk ismét a http://lifehacker.ru webhelyre, és élvezzük a "tiszta" oldalt:
Teljes szívemből szeretnék köszönetet mondani a bővítmény (kiegészítés) szerzőjének.
Telepítés adblock kiterjesztések Plusz a böngészőkben
Először is, ha felkeresi a bővítmény fejlesztőinek hivatalos webhelyét az adblockplus.org link használatával, látni fogja kezdőlap webhely:
Itt válassza ki a használt böngészőt. Személy szerint én használom Chrome böngészőés így lesz egy gombom a bővítmény telepítéséhez, például ez a "Telepítés a Chrome-ra". Persze ha úgy döntesz OPERA böngésző, akkor megjelenik egy "Telepítés az Operára" gomb.
Kattintson a "Telepítés a Chrome-ra" gombra, és ez az ablak nyílik meg előttünk:
Kattintson a "Hozzáadás" gombra, és lépjen ide:
Mint látható, a jobb sarokban egy ablak jelent meg az Adblock Plus bővítmény telepítéséről szóló üzenettel, és aktiválásához kattintson a piros „ABP” ikonra. Ezt fogjuk tenni - Nyomj!
Ez az, most telepítette és aktiválta a bővítményt, amely blokkolja a hirdetéseket az összes webhelyen.
Ez a bővítmény olyan beállításokkal rendelkezik, amelyek segítségével személyes szűrőket hozhat létre, és kizárhat bizonyos domaineket. A beállítások megadásához kattintson a piros „ABP” ikonra, majd alul kattintson a „Beállítások” lehetőségre.
A telets.com.zp.ua/ blog pedig kísérleti oldal lesz.
Menjünk az egyik cikkéhez az Adblock Plus bővítmény letiltásával.
Most aktiválom a bővítményt, és ezt fogjuk látni:
A webhely blokkolásának kikapcsolásához kattintson a piros ikonra, és válassza az „Engedélyezve ezen a webhelyen” lehetőséget. A blokkolás újbóli engedélyezéséhez kattintson a "Letiltva ezen az oldalon" lehetőségre.
Egy elem letiltása a webhelyen
Ehhez kattintson ismét az ABP ikonra, és válassza az "Elem zárolása" lehetőséget.
Ezt követően ki kell választania a webhely bármely elemét, és rá kell kattintania.
Például megpróbálom letiltani a cikk képét.
És így rákattintottam a "Lock element" opcióra, majd rákattintottam a képre. Íme, amit látni fog:
Azt látjuk, hogy megnyílt egy ablak, és megjelenik benne a kód ezzel a képpel. Ha most rákattintunk a „Hozzáadás” gombra, akkor ez a kód blokkolva lesz, és többé nem jelenik meg a blogon.Rákattintok a "Hozzáadás" gombra, és ezt fogjuk látni:
Egy elem letiltásának feloldása a webhelyen
És most megmutatom, hogyan lehet visszaadni egy blokkolt elemet, esetünkben ez egy kép.
Ismét kattintson az ABP ikonra, majd kattintson a "Beállítások" elemre, majd válassza a "Személyes szűrők" lehetőséget.
A személyes szűrőkkel ellátott ablakban az általunk letiltott kép kódja látható.
Válassza ki az összes kódot, és kattintson a "Törlés" gombra. Ezt követően újratöltjük a blog oldalát, és mindent a helyén látunk.
Ebben az üzenetben elmondom, hogyan lehet nagyon egyszerűen és egyszerűen blokkolni a rádiók megjelenítését a LiRu oldalakon a böngészőkben Mozilla Firefoxés böngészőcsaládokban Google Chrome(Chrome, Opera, Yandex stb.).
1. rész. A rádió blokkolása Mozilla böngésző Firefox
Az induláshoz fel kell tennie legújabb verzió kiterjesztések .
Most vigye az egeret a kiterjesztés ikonja fölé:
Ezután kattintson a bal egérgombbal. A legördülő menüben válassza a "Szűrőbeállítások" lehetőséget: 
Itt az "Egyéni szűrők" fülre kell lépnie (kék keret az alábbi képernyőképen):
Elmentél? Most kattintson a "Szűrő hozzáadása" gombra (piros mező a fenti képernyőképen).
Kattintott? Most a megjelenő űrlapon be kell írnia a következőt: "###mediametrics-radio" (idézőjelek nélkül): 
Belépés után ne felejtse el megnyomni az "Enter" gombot.
Új szűrője lesz: 
Most ne felejtse el bejelölni a tőle balra lévő négyzetet (lásd a fenti képernyőképet). Ezután kattintson a "Bezárás" gombra.
Ennyi, a LiRu-n (és mellesleg nem csak a LiRu-n) már nincs rádió.
2. rész: A rádió blokkolása a Google Chrome böngészőcsaládban (Opera, Yandex stb.)
Először telepítenie kell a bővítmény legújabb verzióját Google böngésző Chrome, Opera vagy Yandex. De hogyan kell ezt csinálni? Elég egyszerű. Egy időben az "Adblock Plus" bővítmény Google Chrome-hoz telepítésének teljes folyamatát a "" üzenet ismertette. Ott az üzenet első része a "Hogyan kell telepíteni?". Megértem, hogy nem mindenki szereti követni az üzenetekben található linkeket. És sokan pánikszerűen félnek ettől. De ez ellen nem tudsz mit tenni. Meg kell tenned, sajnos!
Most az egérmutatóval a kiterjesztés ikonja fölé kell vinnie az egeret (zöld keret az alábbi képernyőképen): 
Ezután kattintson a bal egérgombbal. A legördülő menüben válassza a "Beállítások" lehetőséget (kék keret a fenti képernyőképen).
Itt kell mennie a „Személyes szűrők” fülre: 
Tehát hozzá kell adni a "###mediametrics-radio" szöveget a beviteli sorhoz (idézőjelek nélkül, kék keret az alábbi képernyőképen):
Bármely oldalelem blokkolása a Mozilla Firefoxban az Adblock Plus segítségével
Talán érdekelni fogja
Ebben a rövid cikkben egy nagyon kényelmes és hasznos bővítményről szeretnék beszélni, amellyel ideiglenesen letilthatja a teljes oldalt vagy az oldal egy külön elemét.
Az oldallal vagy annak elemeivel kapcsolatos ilyen manipulációk szükségessége akkor merült fel, amikor az AJAX elkezdte népszerűvé válni. Mindenki tudja, hogy amikor egy AJAX kérést küldenek, az végrehajtódik háttér, kifelé semmilyen módon nem jelenik meg, és ahogy ez általában megtörténik, a felhasználó nem érti, mi történik, és ismét rákattint a gombra vagy más elemre, amely AJAX kérést okoz, nagy a valószínűsége annak, hogy valami elromolhat) . Ilyen esetekben a legjobb, ha letiltja a felhasználót, hogy hozzáférjen a gombhoz, űrlaphoz vagy más elemhez, hogy a felhasználó ne tudja újraindítani az AJAX eseményt. És a fejemben jQuery bővítmény A BlockUI tökéletesen passzol, de természetesen más esetekre is használható, attól függően, hogy mire van szükséged.
Használat
A plugin használata nagyon egyszerű, beletesszük a jQuery-t és magát a jQuery BlockUI plugint, majd végrehajtjuk a kódot:
Módosíthatja a szöveg és a háttér színét:
Az egész oldal blokkolása
Az első példák már megmutatták, hogyan lehet blokkolni a teljes oldalt:
Kinyit:
Egyelemes blokkolás
Itt alaposan nézze meg a hívási funkciót, kissé eltér, de a működési elve hasonló:
Kinyit:
Beállítások
| Paraméter | Alapértelmezett | Paraméter Leírás | ||
|---|---|---|---|---|
| üzenet | ‘Kérlek várj…’ |
Az üzenet szövege, amely blokkolva jelenik meg, címkéket adhat meg. | ||
| cím | nulla | Beállítja a blokkoló ablak címét. Ez a beállítás csak akkor működik, ha a beállítás engedélyezve van. téma | ||
| vonszolható | igaz | Húzzuk a blokkoló ablakot az egérkurzorral. Ez a beállítás csak akkor működik, ha a beállítás engedélyezve van. téma | ||
| téma | hamis | Összekapcsolja a vizuális témát és a jQuery UI funkcionalitását. Egyesek számára lehet hasznos funkció, de nem szeretem, ahhoz, hogy minden helyesen jelenjen meg, UI szkripteket és stílusokat is össze kell kapcsolni. | ||
| css |
|
A blokkolóablak vizuális beállításai, szabványos paraméterek egész jól illeszkedik. | ||
| tematikus CSS | Ez a beállítás beállítja a blokkoló ablak hátterét, háttérszínét, átlátszóságát és a kurzort. | |||
| kurzor visszaállítása | 'alapértelmezett' | Nem teljesen egyértelmű beállítás, a kísérletekből ítélve szabályozza a kurzor típusát a zár feloldásának pillanatában. | ||
| morgCSS |
|
Testreszabja kinézet gyors üzenetek. Erről bővebben a demó oldalon, a kóddal hívják: $.growlUI('Cím', 'Szöveg!'); | ||
| iframeSrc | js kódot | A dokumentációból származó leírás alapján a beállítás csinál valamit, ha régebbi IE böngészőkben működik. | ||
| forceIframe | hamis | A fenti beállításhoz kapcsolódik. | ||
| alapZ | 1000 | Beállítja a blokkoló réteg helyzetét a Z tengely mentén. | ||
| központ XÉs központ Y | igaz | Középre állítja a blokkoló ablakot. | ||
| enableBodyStretch | igaz | Egy másik beállítás, aminek látszólag nincs nagy hatása, valószínűleg régebbi IE böngészők esetében. | ||
| bindEvents | igaz | Blokkolja az egérkattintásokat. | ||
| constrainTabKey | igaz | Letiltja a Tab gomb megnyomását<./td> | ||
| fadeIn | 200 | Animációs sebesség íváskor. | ||
| elájulni | 400 | Az animáció sebességének elrejtése. | ||
| időtúllépés | 0 | A megadott idő letelte után a zár automatikusan feloldódik. | ||
| showOverlay | igaz | Letiltja a háttérfedvényt a blokkolóablak mögött. | ||
| fókuszBemenet | igaz | A dokumentációban található leírás alapján be kell állítania a kurzort és az első üres szövegmezőt az oldalon. | ||
| blockMsgClass | 'blokküzenet' | A blokkolóablak CSS-osztálya. | ||
| ignoreIfBlocked | hamis | Ha az elem vagy oldal már le van tiltva, akkor nem blokkoljuk újra. | ||
| quirksmodeOffsetHack | 4 | néhány érthetetlen titkos beállítás amiről még a dokumentációban sem írnak semmit)) |
visszahívási funkciók
Példák
$(document) .on ("submit" , ".form_submit" , function () ( _this = $(this ) ; _block = _this; // kezdje el blokkolni az elemet // az én esetemben a teljes űrlap blokkolva van, így nem lehet újra elküldeni $(_block).block(( üzenet: " ", //csak egy animált ikon, nincs szövegfedőCSS: ( háttérszín: "#fff", átlátszatlanság: 0.8, kurzor: "várj" ), css: ( szegély: 0, kitöltés: 0, háttérszín: "átlátszó" ) ) ) ; $.ajax(( url: _this.attr("action"), típus: "POST", adat: _this.serialize(), dataType: "JSON", siker: függvény (adatok) ( /*... */ ), hiba: function (data) ( /*....*/ ), teljes: function(data) ( $(_block).unblock(); // blokk feloldása ) )); return false; )) ; |
Ez az, a jQuery BlockUI bővítmény használata nagyon egyszerű és kényelmes. További bemutatópéldák a fejlesztői oldalon találhatók.
Talán érdekelni fogja