Vyvolání Windows-menu pomocí pravého tlačítka myši
Jistě jste už někdy potřebovali na svou stránku umístit nějaké neobvyklé menu, které by se vyvolávalo stiskem pravého tlačítka na myši a usnadnit tak přístup k některým odkazům či funkcím na stránce. V dnešním příkladu vám ukáži, jak toto jednoduché kontextové menu vytvořit pomocí JavaScriptu…
Hned na začátku bych chtěl podotknout, že script je funkční pouze v Internet Exploreru 5 a vyšším. Abyste věděli, o co vlastně jde, klikněte zde na ukázku.
Začneme tím, že si pomocí div nakreslíme menu. Vlastnosti tagu určíme pomocí CSS stylu pro snadnější změnu. Barvy, písmo apod. si můžete nastavit pochopitelně sami. Zde je vše nastaveno pro podobu s operačním systémem Windows.
|
V tagu <div> URL reprezentuje odkaz, kam bude menu dále směrovat. Jako další vytvoříme funkci, která nám bude menu zobrazovat (nastaví div visibility), a která ho umístí na místo kurzoru.
|
Podmínky ve funkci showmenu() ošetřují umístění menu. Pokud by kurzor byl například v pravém dolním rohu, menu by se zobrazilo mimo obrazovku, což je nežádoucí. Event.clientX a Y vrací vertikální a horizontální pozici kurzoru, clientWidth a clientHeight vrací velikost otevřeného okna a menu.style.left (top) vraci pozici leveho horniho okraje tagu <;div id=menu>. Menu.style.visibility logicky určuje CSS styl viditelnosti. Funkce, která menu opět skryje, je až trapně jednoduchá:
|
Další důležitou funkcí je změna barvy položky při najetí kurzorem. To se provede pomocí změny stylu třídy menuitems:
|
Vlastnost event.srcElement vrací název objektu, ze kterého je funkce volána. Tyto funkce budeme volat z tagu div, který jsme definovali hned na začátku, a to pomocí událostí onMouseover a onMouseout.
|
Funkce jumpto() provede přesměrování na odkaz vybraný v menu …
|
Notoricky známá funkce window.open() otevírá nové okno prohlížeče a vlastnost window.location nastavuje aktuálně otevřenou stránku. Nyní už máme celý script vytvořen a zbývá jen zapsat událost, která zavolá skrytí a zobrazení našeho menu. Do těla stránky tedy vložíme toto:
|
Událost onContextMenu symbolizuje klik pravého tlačítka myši.
A to je vše, přeji vám hezký den.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Windows App: Pracujte odkudkoliv, kdykoliv
3. listopadu 2024 -
Znovuuvedení domény .AD
5. září 2024 -
Nejlevnější VPS: To je nový Cloud Server Mini od ZonerCloud
4. června 2024
Nejnovější
-
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024 -
Windows App: Pracujte odkudkoliv, kdykoliv
3. listopadu 2024