Na ponuku sa v prehliadači nedá kliknúť myšou. Ovládanie kliknutia pravým tlačidlom myši (oncontextmenu). Čo je kontextové menu

Kontextové menu– toto je ponuka, ktorá sa zobrazí po kliknutí pravým tlačidlom myši na obrazovku. Takéto ponuky sa zvyčajne používajú na uľahčenie vykonávania obľúbených akcií, ako je triedenie priečinkov a súborov, otváranie nového okna aplikácie alebo prístup k nastaveniam systému.

Po mnoho rokov sa pojem „kontextové menu“ týkal predovšetkým natívnych aplikácií. Teraz však máme možnosť využiť to aj vo webových aplikáciách. Príkladom je správca súborov v Gmile. Toto menu je implementované pomocou kódu javascript:

V budúcnosti budeme môcť vytvárať kontextové ponuky pre stránky založené na HTML5. Pozývame vás, aby ste sa oboznámili s týmto prístupom.

Vývoj kontextového menu

HTML5 nám predstavilo 2 nové prvky: menu a menuitem a umožňujú vytvárať kontextové menu. Aby prehliadač považoval prvok ponuky za „kontextovú ponuku“, musíme nastaviť typ ponuky na kontext a tiež mu dať jedinečné ID.

Nižšie je uvedený príklad, kde vytvoríme kontextové menu s týmito vlastnosťami.

Stále máme tiež možnosť pridávať podponuky rozvetvením prvku ponuky takto:

Teraz, aby sa kontextové menu zobrazilo na obrazovke po kliknutí pravým tlačidlom myši, používame nový atribút HTML s názvom kontextové menu. Tento atribút sa používa na identifikáciu ponuky so zadaným ID. Vzhľadom na náš príklad vyššie môžeme definovať naše kontextové menu pomocou contextmenu=context-menu-id.

Atribút môžeme nastaviť v značke body, ak chceme používať kontextové menu na celej stránke. Môžeme ho tiež pridať do prvku HTML, takže toto menu bol použitý výlučne v rámci tohto prvku.

Teraz sa v ponuke Operačný systém zobrazí nová kontextová ponuka, ako je vidieť v príklade nižšie.

Pridanie ikony

Sme si istí, že mnohí z vás videli kontextové ponuky, ktoré používajú ikony. V niektorých prípadoch môže byť ikona skvelou vizuálnou pomôckou, ktorá používateľom pomôže nájsť ponuku. Okrem toho tiež umožňuje používateľom pochopiť, na čo slúži menu.

Do kontextového menu HTML5 môžeme pridať aj ikonu pomocou atribútu icon:

To je to, čo uvidíme v okne prehliadača.

Aby menu fungovalo

V tejto fáze naše nové kontextové menu po kliknutí nebude fungovať. Veľmi ľahko ho však privedieme k rozumu malý kód javascript V našom príklade sa ponuka volá Výber e-mailu. Táto ponuka umožňuje používateľom odoslať vybraný text e-mailom.

Aby to fungovalo, pridajte funkciu, ktorá používateľom umožní používať kód za ním.

Funkcia getSelectedText() (
var text = "";
if(window.getSelection) (
text = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Control") (
text = document.selection.createRange().text;
}
vrátiť text;
};
Potom vytvoríme ďalšiu funkciu, povedzme sendEmail(), ktorá otvorí poštového klienta. Predmetom emailu bude zadaný text z nadpisu dokumentu a telo emailu bude vyplnené vybraným textom.

Funkcia sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Nakoniec túto funkcionalitu pridávame do našej ponuky prostredníctvom atribútu onclick.

Výber e-mailu
Už predtým sme vám povedali o tom, ako používať HTML5 EditableContent, ktorý nám umožňuje upravovať webový obsah priamo na stránke. Môžeme použiť túto funkciu, čím sa pridá do našej ponuky s názvom „Upraviť obsah“.

Na záver

Osobne sme z toho mali veľkú radosť nová funkcia. Vidíme v ňom veľa príležitostí. Bohužiaľ, v čase písania tohto materiálu túto vlastnosť podporoval iba Firefox. Dúfame, že sa k nemu čoskoro pripoja aj ďalšie prehliadače.

Nižšie si môžete pozrieť ukážku (funguje iba vo Firefoxe).

V tomto návode sa pozrieme na zriedkavo spomínanú funkciu HTML5 – kontextové menu. Možno ste o tomto menu ešte nepočuli, no v niektorých situáciách môže byť mimoriadne užitočné.

Na čo možno použiť atribút kontextového menu? Umožňuje vám pridávať rôzne možnosti do kontextového menu prehliadača kliknutím pravým tlačidlom myši pomocou niekoľkých riadkov kódu HTML, aj keď je JavaScript zakázaný. Aj keď momentálne toto šikovný nástroj k dispozícii iba vo Firefoxe.

Funguje to takto:

Používanie kontextového menu je oveľa jednoduchšie, ako by sa na prvý pohľad mohlo zdať. Musíte pridať atribút kontextového menu:

Potom vytvoríme menu:

Atribút id sa musí zhodovať s atribútom kontextového menu. Je teda možné použiť rôzne kontextové ponuky pre rôzne časti stránky.

Potom pridáme položky menu. Najprv vložíme položku menu s textom a ikonou, potom pridáme odkaz na vysielanie aktuálnej stránky na Facebooku a nakoniec vložíme odkaz na aktualizáciu stránky. Výsledkom je kontextové menu s tromi položkami:

Môžete tiež vytvoriť podponuky:

Veľmi zaujímavá a užitočná vlastnosť HTML5. Jeho použitie je však obmedzené iba na prehliadač Firefox.

Prevádzka všetkých zariadení. V prípade porúch alebo porúch nie je vždy potrebné volať špecialistov, ktorí niekedy platia za svoje služby za pomerne vysoké ceny. Mnohé nedostatky a chyby môžete opraviť sami. Tieto typy porúch a chýb zahŕňajú prípady, keď pravé tlačidlo myši neotvorí kontextovú ponuku. Čo robiť v takýchto prípadoch?

Najprv by ste mali zistiť, prečo dielo nefunguje správne, prečo kontextové Ponuka systému Windows 10. Existuje niekoľko možných dôvodov:

neporiadok registrov so zastaranými súbormi;
nedostatok programov zahrnutých v kontextovej ponuke, ich nestabilná prevádzka.

Uvažujme, čo robiť v týchto prípadoch, ako zmeniť situáciu, keď sa kontextové menu pravým tlačidlom myši neotvorí.

Ak sa kontextová ponuka po kliknutí pravým tlačidlom myši nezobrazí z dôvodu preplneného registra neaktuálnymi súbormi, odporúčame na jeho vyčistenie použiť pomôcku, akou je Glary Utilities. Glary Utilities je súprava systémových tweakerov, pomôcok, ktoré pomáhajú chrániť, jemné ladenie, zvýšenie výkonu počítača. Pomocou sady môžete odstrániť nepotrebné súbory, ktoré upchávajú systém, záznamy registrov, ktoré sú už dávno zastarané, optimalizovať RAM, spravovať spúšťanie, optimalizovať pamäť a ďalšie funkcie užitočné pre dobré fungovanie vášho počítača. Glary Utilities si môžete stiahnuť zadarmo.

Po nastavení nastavení vymažte zariadenie z nepotrebné súbory Pomocou rovnakého nástroja vyčistite register, čím zvýšite výkon svojho počítača.

Oprava chyby zamrznutia

Ak po kliknutí pravým tlačidlom myši na súbor alebo priečinok nefunguje kontextové menu na ploche, počítač zamrzne, kláves nereaguje na príkazy, toto zamrznutie môžete opraviť dvoma spôsobmi, odporúčame vykonať oba postupne. Skôr ako začnete s ktoroukoľvek z týchto činností, musíte mať práva správcu. Budete musieť pracovať s registrom, tu musíte byť opatrní, ak to urobíte nesprávne, systém môže zlyhať. Preto pri spustení procesu odstraňovania porúch nezabudnite pred odstránením čohokoľvek vytvoriť bod obnovenia systému.

„Tiché“ zamrznutie je zvyčajne spôsobené nestabilným programom, zamrznutým programom alebo keď odkaz v kontextovej ponuke ukazuje na neexistujúci zdroj.

Metóda jedna

Postupujte podľa nasledujúcich krokov:

V zobrazenom zozname skontrolujte prítomnosť programov, ktoré ste už odstránili.
Ak je v zozname program, ktorý ste odstránili, odstráňte ho z registra. Pred odstránením akéhokoľvek kľúča databázy Registry odporúčame vytvoriť jeho archívnu kópiu, aby ste si ju uložili pre prípad, že by ste ho potrebovali obnoviť.

Metóda dva

Algoritmus pre druhú metódu, keď sa kontextová ponuka systému Windows 10 neotvorí, bude nasledujúci.

Otvorte editor databázy Registry podľa popisu v krokoch 1–2 predchádzajúcej metódy.
Otvorte podkľúč HKEY_CLASSES_ROOT,
V ňom uvidíte niekoľko podsekcií s názvami ako „name_programm.exe“, „name_programm.dll“. Postupne skontrolujte každý z nich kliknutím na LMB až do podsekcie „príkaz“. Všetky podsekcie by sa mali otvoriť. Ak sa neotvorí, skontrolujte na pravej strane okna prítomnosť parametra „NoOpenWith“. Takýto parameter neexistuje - vytvorte ho. Ak to chcete urobiť, postupujte takto:

Po nájdení podsekcie „príkaz“ kliknite na LMB a skontrolujte prítomnosť parametra „(Predvolené)“ na pravej strane. Parameter musí byť špecifikovaný pre aplikáciu resp sieťový zdroj existujúci v počítači.

Ak parameter odkazuje na zdroj, ktorý už chýba, mala by sa vymazať celá sekcia začínajúca názvom tohto prostriedku alebo programu. Pred odstránením nezabudnite vytvoriť archívnu kópiu na obnovenie v prípade potreby. Vymažte kliknutím na názov sekcie RMB a potom kliknutím na „Odstrániť“ - „Áno“.

Po dokončení dvoch metód by sa mala otvoriť kontextová ponuka, počítač už nezamrzne pri kliknutí pravým tlačidlom myši na súbor.

Nie je ťažké spustiť kontextové menu, len si pamätajte, že akékoľvek pokusy o zmenu registra môžu viesť k nestabilná práca PC, takže nezabudnite vytvárať body obnovenia, archivovať kópie odstránených programov. Keď pravé tlačidlo myši neotvorí kontextovú ponuku, postupujte podľa vyššie uvedených pokynov, použite všetky metódy, chyba bude opravená.

Všimli ste si, že kliknutie pravým tlačidlom myši na obrázky na niektorých stránkach k ničomu nevedie. Zdá sa, že tlačidlo nečinne kliká a prehliadač sa o to nestará – „zamrzne a premýšľa“. V skutočnosti prehliadač po prijatí takéhoto príkazu z JavaScript skriptu načítanej stránky jednoducho zablokuje kliknutia.

Ako odomknúť pravé tlačidlo kliknúť na obrázok a uložiť ho na prezeranie offline? Vo väčšine internetových prehliadačov to stačí na „hrabanie“ v pokročilých nastaveniach JavaScript.. Takže…

Ak máte " Opera»:
1. Nasledujte cestu „Nástroje“ -> „Všeobecné nastavenia“;
2. V zobrazenom okne sa zastavte na položke „Obsah“ a nájdite tlačidlo „Konfigurovať JavaScript“ (pozri obr. 1).

3. Kliknutím naň vyvoláte podrobné okno Nastavenia JavaScriptu a zrušte začiarknutie políčka vedľa položky „Blokovať pravé tlačidlo“.
Po potvrdení (kliknutím na „OK“) sa toto tlačidlo stane „voľným“ pre vyvolanie kontextového menu. Mimochodom, v " FireFox„Pre odomknutie pravého tlačidla je potrebné zrušiť zaškrtnutie políčka pri tejto položke (pozri obr. 2).

V iných pokročilých prehliadačoch sa blokovanie pravého tlačidla odstráni rovnakým spôsobom – prostredníctvom rovnakých pokročilých nastavení JavaScriptu.

Webové aplikácie sa dnes stávajú novým krokom k rozvoju webu. Od bežných informačných stránok majú ďaleko. Príklady pokročilých webových aplikácií zahŕňajú Gmail a Dropbox. S rastúcou funkčnosťou, dostupnosťou a užitočnosťou webových aplikácií rastie aj potreba zvyšovať efektivitu ich využívania. Táto príručka sa pozrie na vytvorenie takej užitočnej veci, ako je vaša vlastná kontextová ponuka, a najmä:

Poďme zistiť, čo je kontextové menu a prečo je potrebné.
Implementujme si vlastné kontextové menu pomocou JS a CSS.
Dotknime sa nevýhod a obmedzení použitého prístupu, aby sme vedeli, aké problémy nás môžu varovať pri zavádzaní tohto všetkého do výroby.

Čo je kontextové menu?

Podľa Wikipédie je kontextová ponuka ponuka, ktorá sa zobrazí pri interakcii používateľa grafické rozhranie(kliknutím pravým tlačidlom myši). Kontextové menu obsahuje obmedzenú množinu možné akcie, ktoré sú zvyčajne spojené s vybraným objektom.

V počítači kliknutím pravým tlačidlom myši na pracovnú plochu zobrazíte kontextovú ponuku operačný systém. Odtiaľ môžete pravdepodobne vytvoriť nový priečinok, získať nejaké informácie a urobiť niečo iné. Kontextové menu v prehliadači umožňuje napríklad získať informácie o stránke, zobraziť jej zdroje, uložiť obrázok, otvoriť odkaz na novej karte, pracovať so schránkou a pod. Okrem toho množina dostupných akcií závisí od toho, kde presne ste klikli, teda od kontextu. Toto je štandardné správanie určené vývojármi prehliadačov [ A rozšírenia k nemu].

Webové aplikácie postupne začínajú nahrádzať štandardné kontextové menu svojimi vlastnými. Skvelými príkladmi sú Gmail a Dropbox. Jedinou otázkou je, ako vytvoriť vlastné kontextové menu? Keď v prehliadači kliknete pravým tlačidlom myši, spustí sa udalosť kontextového menu. Budeme musieť prepísať predvolené správanie a nastaviť, aby sa namiesto štandardného menu zobrazovalo naše vlastné. Nie je to až také ťažké, ale prejdeme si to postupne, takže to bude dosť rozsiahle. Po prvé, poďme vytvoriť základná štruktúra aplikácie tak, aby vyvíjaný príklad nebol úplne oddelený od reality.

Zoznam úloh

Predstavme si, že vytvárame aplikáciu, ktorá nám umožňuje udržiavať zoznam úloh. Chápem, že ste pravdepodobne už neskutočne unavení zo všetkých týchto zoznamov úloh, ale budiž. Stránka aplikácie obsahuje zoznam nedokončených úloh. Pre každú úlohu je k dispozícii typický súbor akcií CRUD: získať informácie o úlohe, pridať novú, upraviť, odstrániť.

Od prekladateľa
Preklad je miestami celkom voľný, ale nie na úkor významu či obsahu. Všetko, čo sa priamo netýka originálu, je zahrnuté v poznámkach.
S návrhmi, želaniami a komentármi, ako obvykle, v PM.

Tematické materiály: