Vlastní 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).

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.