Kontextové menu v prohlížeči pomocí HTML5. Vlastní kontextové menu pomocí JavaScriptu V prohlížeči není možné kliknout myší

Webové aplikace se dnes stávají novým krokem k rozvoji webu. K běžným informačním stránkám mají daleko. Mezi pokročilé webové aplikace patří například Gmail a Dropbox. S rostoucí funkčností, dostupností a užitečností webových aplikací roste i potřeba zvyšovat efektivitu jejich používání. Tato příručka se podívá na vytvoření tak užitečné věci, jako je vaše vlastní kontextová nabídka, a zejména:

1. Pojďme zjistit, co je kontextové menu a proč je potřeba.
2. Pojďme implementovat vlastní kontextové menu pomocí JS a CSS.
3. Pojďme se dotknout nedostatků a omezení použitého přístupu, abychom věděli, jaké problémy nás mohou varovat při uvedení toho všeho do výroby.

Co je kontextová nabídka?

Podle Wikipedie je kontextová nabídka nabídka, která se zobrazí, když uživatel interaguje s grafickým rozhraním (kliknutím pravým tlačítkem myši). Kontextová nabídka obsahuje omezenou sadu možných akcí, které jsou obvykle spojeny s vybraným objektem.

V počítači kliknutím pravým tlačítkem myši na plochu vyvoláte místní nabídku operačního systému. Odtud pravděpodobně můžete vytvořit novou složku, získat nějaké informace a udělat něco jiného. Kontextová nabídka v prohlížeči umožňuje například získat informace o stránce, zobrazit její zdroje, uložit obrázek, otevřít odkaz na nové kartě, pracovat se schránkou a podobně. Sada dostupných akcí navíc závisí na tom, kam přesně jste klikli, tedy na kontextu. Toto je standardní chování zamýšlené vývojáři prohlížečů [ A k tomu rozšíření].

Webové aplikace postupně začínají nahrazovat standardní kontextové nabídky svými vlastními. Skvělými příklady jsou Gmail a Dropbox. Jedinou otázkou je, jak vytvořit vlastní kontextové menu? Když v prohlížeči kliknete pravým tlačítkem myši, spustí se událost kontextového menu. Budeme muset přepsat výchozí chování a nastavit, aby se zobrazovalo naše vlastní místo standardní nabídky. Není to tak těžké, ale projdeme si to krok za krokem, takže to bude docela obsáhlé. Nejprve si vytvořte základní strukturu aplikace, aby vyvíjený příklad nebyl zcela odtržen od reality.

Seznam úkolů

Představme si, že vytváříme aplikaci, která nám umožňuje udržovat seznam úkolů. Chápu, že už jste asi neuvěřitelně unavení ze všech těch seznamů úkolů, ale budiž. Stránka aplikace obsahuje seznam nedokončených úkolů. Pro každou úlohu je k dispozici typická sada akcí CRUD: získat informace o úloze, přidat novou, upravit, odstranit.

Od překladatele

Překlad je místy docela volný, ale není to na škodu smyslu ani obsahu. Vše, co se přímo netýká originálu, je uvedeno v poznámkách.
S návrhy, přáními a připomínkami jako obvykle v PM.

V tomto tutoriálu se podíváme na zřídka zmiňovanou funkci HTML5 – kontextové menu. Možná jste o této nabídce ještě nikdy neslyšeli, ale v některých situacích může být nesmírně užitečná.

K čemu může být použit atribut contextmenu? Umožňuje vám přidávat různé možnosti do kontextové nabídky prohlížeče po kliknutí pravým tlačítkem pomocí několika řádků kódu HTML, a to i v případě, že je zakázán Javascript. I když v současné době je takový pohodlný nástroj k dispozici pouze ve Firefoxu.

Funguje to takto:

Použití kontextového menu je mnohem jednodušší, než by se na první pohled mohlo zdát. Musíte přidat atribut contextmenu:

Poté vytvoříme menu:

Atribut id se musí shodovat s atributem contextmenu. Je tedy možné používat různé kontextové nabídky pro různé části stránky.

Poté přidáme položky nabídky. Nejprve vložíme položku menu s textem a ikonou, poté přidáme odkaz na vysílání aktuální stránky na Facebooku a nakonec vložíme odkaz na aktualizaci stránky. Výsledkem je kontextová nabídka se třemi položkami:

Můžete také vytvořit podnabídky:

Velmi zajímavá a užitečná vlastnost HTML5. Jeho použití je však omezeno pouze na prohlížeč Firefox.

Všimli jste si, že klikání pravým tlačítkem na obrázky na některých stránkách k ničemu nevede. Zdá se, jako by tlačítko nečinně klikalo a prohlížeč se o to nestaral – „zamrzne a přemýšlí“. Ve skutečnosti prohlížeč po přijetí takového příkazu z JavaScript skriptu načtené stránky jednoduše zablokuje kliknutí.

Jak odemknout pravé tlačítko kliknout na obrázek a uložit jej pro offline prohlížení? Ve většině internetových prohlížečů to stačí k „hrabání“ v pokročilých nastaveních JavaScript.. Tak…

Pokud máte " Opera»:
1. Postupujte podle cesty „Nástroje“ -> „Obecná nastavení“;
2. V okně, které se objeví, se zastavte u položky „Obsah“ a najděte tlačítko „Konfigurovat JavaScript“ (viz obr. 1).

3. Kliknutím na něj otevřete okno podrobného nastavení JavaScriptu a zrušte zaškrtnutí políčka vedle řádku „Blokovat pravé tlačítko“.
Po potvrzení (kliknutím na „OK“) se toto tlačítko stane „volným“ pro vyvolání kontextového menu. Mimochodem, v " Firefox„Pro odemknutí pravého tlačítka je potřeba zrušit zaškrtnutí políčka u této položky (viz obr. 2).

V jiných pokročilých prohlížečích se blokování pravého tlačítka odstraňuje stejným způsobem – prostřednictvím stejných pokročilých nastavení JavaScriptu.

Kontextová nabídka je nabídka, která se zobrazí po kliknutí pravým tlačítkem myši na obrazovku. Obvykle se takové nabídky používají k usnadnění provádění oblíbených akcí, jako je třídění složek a souborů, otevírání nového okna aplikace nebo přístup k nastavení systému.

Po mnoho let se termín „kontextové menu“ týkal především nativních aplikací. Nově však máme možnost jej využít i ve webových aplikacích. Příkladem je správce souborů v Gmil. Tato nabídka je implementována pomocí kódu javascript:

V budoucnu budeme moci vytvářet kontextové nabídky pro weby založené na HTML5. Zveme vás, abyste se s tímto přístupem seznámili.

Vývoj kontextového menu

HTML5 nám představilo 2 nové prvky: menu a menuitem a umožňují vytvářet kontextové nabídky. Aby prohlížeč zacházel s prvkem nabídky jako s „kontextovou nabídkou“, musíme nastavit typ nabídky na kontext a také mu dát jedinečné ID.

Níže je uveden příklad, kde vytvoříme kontextové menu s těmito vlastnostmi.

Upravit obsah
Výběr e-mailu

Stále máme také možnost přidávat podnabídky rozvětvením prvku nabídky takto:

Upravit obsah
Výběr e-mailu

Facebook
Cvrlikání


Nyní, aby se kontextová nabídka zobrazila na obrazovce po kliknutí pravým tlačítkem, používáme nový atribut HTML nazvaný kontextová nabídka. Tento atribut se používá k identifikaci nabídky se zadaným ID. Vzhledem k našemu příkladu výše, můžeme definovat naši kontextovou nabídku pomocí contextmenu=context-menu-id.

Atribut můžeme nastavit ve značce body, pokud chceme používat kontextové menu po celé stránce. Můžeme jej také přidat do prvku HTML, aby se nabídka používala výhradně v rámci tohoto prvku.

Nyní se v nabídce Operační systém objeví nová kontextová nabídka, jak je vidět v příkladu níže.

Přidání ikony

Jsme si jisti, že mnozí z vás viděli kontextové nabídky, které používají ikony. V některých případech může být ikona skvělým vizuálním pomocníkem, který uživatelům pomůže najít nabídku. Kromě toho také umožňuje uživatelům pochopit, k čemu menu slouží.

Můžeme také přidat ikonu do naší kontextové nabídky HTML5 pomocí atributu icon:

Upravit obsah
Výběr e-mailu

Facebook
Cvrlikání


To je to, co uvidíme v okně prohlížeče.

Aby menu fungovalo

V této fázi naše nové kontextové menu po kliknutí nebude fungovat. Můžeme jej však velmi snadno oživit trochou javascriptového kódu. V našem příkladu se nabídka nazývá Výběr e-mailu. Tato nabídka umožňuje uživatelům odeslat vybraný text e-mailem.

Aby to fungovalo, přidejte funkci, která uživatelům umožní používat kód za tím.

Funkce getSelectedText() (
var text = "";
if(window.getSelection) (
text = window.getSelection().toString();
) else if (document.selection && document.selection.type != "Control") (
text = document.selection.createRange().text;
}
návratový text;
};
Poté vytvoříme další funkci, řekněme sendEmail(), která otevře poštovního klienta. Předmětem emailu bude zadaný text z názvu dokumentu a tělo emailu bude vyplněno vybraným textem.

Funkce sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
Nakonec tuto funkcionalitu přidáme do naší nabídky prostřednictvím atributu onclick.

Výběr e-mailu
Již dříve jsme vám řekli, jak používat HTML5 EditableContent, který nám umožňuje upravovat webový obsah přímo na stránce. Tuto funkci můžeme použít tak, že ji přidáme do naší nabídky s názvem „Upravit obsah“.

Na závěr

Osobně jsme z této nové funkce velmi nadšení. Vidíme v tom mnoho příležitostí. Bohužel v době psaní tohoto materiálu tuto vlastnost podporoval pouze Firefox. Doufáme, že se k němu brzy připojí i další prohlížeče.

Níže si můžete prohlédnout ukázku (funguje pouze ve Firefoxu).

Provoz všech zařízení. V případě poruch nebo poruch není vždy nutné volat specialisty, někdy platí za jejich služby za poměrně vysoké ceny. Mnoho nedostatků a chyb můžete opravit sami. Tyto typy selhání a chyb zahrnují případy, kdy pravé tlačítko myši neotevře kontextovou nabídku. Co dělat v takových případech?

Nejprve byste měli zjistit, proč k poruše dochází, proč kontextová nabídka systému Windows 10 nefunguje. Existuje několik možných důvodů:

• registru nepořádek se zastaralými soubory;
• nedostatek programů zahrnutých v kontextovém menu, jejich nestabilní provoz.

Zvažme, co dělat v těchto případech, jak změnit situaci, když se kontextová nabídka pravým tlačítkem myši neotevře.

Pokud se kontextová nabídka po kliknutí pravým tlačítkem nezobrazí kvůli přeplněnému registru zastaralými soubory, doporučujeme k vyčištění použít nástroj, jako je Glary Utilities. Glary Utilities je sada systémových tweakrů a nástrojů, které pomáhají chránit, dolaďovat a zlepšovat výkon počítače. Pomocí sady můžete odstranit nepotřebné soubory, které ucpávají systém, položky registru, které jsou dávno zastaralé, optimalizovat RAM, spravovat spouštění, optimalizovat paměť a další funkce užitečné pro dobré fungování vašeho počítače. Glary Utilities lze stáhnout zdarma.

Po nastavení nastavení vyčistěte zařízení od nepotřebných souborů pomocí stejného nástroje, vyčistěte registr, čímž zvýšíte výkon svého počítače.

Oprava chyby zamrznutí

Pokud po kliknutí pravým tlačítkem na soubor nebo složku nefunguje kontextová nabídka na ploše, počítač zamrzne, klávesa nereaguje na příkazy, můžete toto zamrznutí opravit dvěma způsoby, doporučujeme provést oba postupně. Než začnete s některým z nich, musíte mít práva správce. Budete muset pracovat s registrem, zde musíte být opatrní, pokud to uděláte špatně, systém může selhat. Proto při zahajování procesu opravy selhání nezapomeňte před odstraněním čehokoli vytvořit bod obnovení systému.

„Tiché“ zamrznutí je obvykle způsobeno nestabilním programem, zamrznutým programem nebo když odkaz v kontextové nabídce ukazuje na neexistující zdroj.

Metoda jedna

Postupujte podle následujících kroků:

1. V zobrazeném seznamu zkontrolujte přítomnost programů, které jste již odstranili.
2. Pokud je v seznamu program, který jste odebrali, odeberte jej z registru. Před odstraněním jakéhokoli klíče registru doporučujeme vytvořit jeho archivní kopii pro případ, že jej budete potřebovat obnovit.

Metoda dva

Algoritmus pro druhou metodu, když se kontextová nabídka Windows 10 neotevře, bude následující.

1. Otevřete editor registru, jak je popsáno v krocích 1–2 předchozí metody.
2. Otevřete podklíč HKEY_CLASSES_ROOT,
3. V něm uvidíte několik podsekcí s názvy jako „name_programm.exe“, „name_programm.dll“. Postupně zkontrolujte každý z nich kliknutím na LMB až do podsekce „příkaz“. Všechny podsekce by se měly otevřít. Pokud se neotevře, podívejte se na pravou stranu okna na přítomnost parametru „NoOpenWith“. Žádný takový parametr neexistuje – vytvořte jej. Chcete-li to provést, postupujte takto:

1. Po nalezení podsekce „příkaz“ klikněte na LMB a zkontrolujte přítomnost parametru „(Výchozí)“ na pravé straně. Parametr musí být zadán pro aplikaci nebo síťový prostředek, který v počítači existuje.

• Pokud parametr odkazuje na zdroj, který již chybí, měla by být odstraněna celá sekce začínající názvem tohoto zdroje nebo programu. Před odstraněním nezapomeňte vytvořit archivní kopii pro obnovení v případě potřeby. Smažte kliknutím na název sekce RMB a poté kliknutím na „Odstranit“ - „Ano“.

Po dokončení dvou metod by se měla otevřít kontextová nabídka, PC již nebude zamrzat při kliknutí pravým tlačítkem myši na soubor.

Není těžké nastavit kontextové menu, jen si pamatujte, že jakékoli pokusy o změnu registru mohou vést k nestabilnímu provozu počítače, takže nezapomeňte vytvářet body obnovení, archivované kopie smazaných programů. Když pravé tlačítko myši neotevře kontextovou nabídku, postupujte podle pokynů výše, použijte všechny metody, chyba bude opravena.