Kontextová nabídka

Ve složitější webové aplikaci často bývá problém najít volné místo pro umístění potřebných funkcí. Řešením může být právě vlastní kontextová nabídka, která se objeví po stisknutí pravého tlačítka myši.

Ta bude fungovat tak, že vystornuje výchozí nabídku prohlížeče a zobrazí vlastní kolekci vhodně nastylovaných elementů. Proto je třeba vlastní nabídku pravého tlačítka zavádět s rozmyslem, neboť to je významný zásah do výchozího chování prohlížeče.

Řešení v čistém JavaScriptu

Zachytit stisknutí pravého tlačítka myši na požadovaném elementu je možné přes událost oncontextmenu, potom jen stačí vytvořit příslušné elementy (document.createElement), zjistit souřadnice, kde se má nabídka objevit. A zajistit zrušení nabídky po kliknutí mimo (je třeba řešit probublávání).

Nakonec přihodit trochu CSS, aby nabídka trochu vypadala (živá ukázka).

Text s kontextovou nabídkou po kliknutí pravým tlačítkem.

Text s jinou kontextovou nabídkou.

Položky se předávají jako JS objekt, ze kterého se automaticky nastaví všechny parametry:

[
  {innerHTML: 'Zpět', href: 'http://jecas.cz'},
  {innerHTML: 'Bafnout', onclick: function() {alert('Baf')}}
]

Není proto problém po kliknutí přejít na odkaz, vyvolat další JS funkci nebo třeba položce přidat třídu (className) nebo popisek (title).

ContextJS

Také existují hotová řešení v jQuery — třeba ContextJS.

Web

Nástroj ContextJS je na jQuery založené hotové řešení usnadňující tvorbu kontextových menu. Tvorba takových nabídek je podobná (ale nepoužívá přímo vlastnosti HTML objektů):

context.attach('.trida-elementu-kde-se-bude-menu-objevovat', [
    {header: 'Záhlaví'},
    {text: 'Popis položky', href: '#cil-odkazu'},
    {divider: true},
    {text: 'Další položka po oddělovači', href: '#'},
    {text: 'Vyvolá vlastní JS akci', action: function(e){
      alert("Baf");
    }}
]);

Zakázat pravé tlačítko myši

Kromě nabídky výše uvedený postup i blokuje pravé tlačítko / kontextovou nabídku. V žádném případě není vhodné pravé tlačítko blokovat z důvodů jako je kopírování textu nebo obrázků.

Takový zákaz stejně nebude účinný, protože znalejší návštěvník ho snadno obejde prostým vypnutím JavaScriptu.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Test existence obrázku JavaScriptem

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře