Vyvolání Windows-menu pomocí pravého tlačítka myši

23. dubna 2001

•

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.

<STYLE TYPE=’text/css’>
<–
.Menu{position: absolute; visibility:hidden; cursor: default; font: menutext; width: 165px; background-color: menu; border: 1 solid buttonface; border: 2 outset buttonhighlight;}
.menuitems{padding-left:15px; padding-right:10px;}
–>
</STYLE>
<!–[if IE]>
<div id=“menu“ class=“Menu“>
<div class=“menuitems“ url=“#top“>Nahoru</div>
<div class=“menuitems“ url=“http://www.interval.cz“ target=“_blank“>Interval.cz</div>
<HR>
// HR oddeli polozky menu carou
<div class=“menuitems“ url=“mailto:jan.pohanka@interval.cz“>Poslat e-mail</div>
</div>
<![endif]–>

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.

function showmenu(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
if (rightedge<menu.offsetWidth)
menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth
// kdyz je kurzor bliz k pravemu okraji nez je sirka menu, tak se zobrazi na druhe strane
else
menu.style.left=document.body.scrollLeft+event.clientX
if (bottomedge<menu.offsetHeight)
menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight
// kdyz je kurzor bliz k spodu okna nez je vyska menu, tak se menu zobrazi nad kurzorem
else
menu.style.top=document.body.scrollTop+event.clientY
menu.style.visibility=“visible“
return false
}

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á:

function hidemenu(){menu.style.visibility=“hidden“}

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:

function highlight(){
if (event.srcElement.className==“menuitems“){
event.srcElement.style.backgroundColor=“highlight“
event.srcElement.style.color=“white“
} // nastavi pozadi bunky na modre a barvu textu na bilou
}
function lowlight(){
if (event.srcElement.className==“menuitems“){
event.srcElement.style.backgroundColor=““
event.srcElement.style.color=“black“
}// nastavi barvy zpet
}

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 …

function jumpto(){
if (event.srcElement.className==“menuitems“){
if (event.srcElement.url != “){// pokud neni v <;div> zadano url nestane se nic
if (event.srcElement.getAttribute(„target“)!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute(„target“))
// pokud je v div tagu zapsan najaky target otevre se nove okno
else
window.location=event.srcElement.url// pokud je v div tagu zapsan target neni, stranka se otevre ve stavajicim okne
}
}
}

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: