Lo script che presentiamo è un menù contestuale che sostituisce l'originale del browser quando si preme il tasto destro del mouse.
Sarà possibile modificare ampiamente l'estetica e personalizzare il menù con voci a piacere. Il codice, tra l'altro, funziona perfettamente con tutti e tre i maggiori browser in circolazione: Microsoft Explorer 5.x, Netscape 6.x e Navigator 4.x.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo questi fogli di stile tra i tag <head> della pagina. Ci serviranno per personalizzare l'estetica del menù:
<style type="text/css">
.link{
cursor:hand;
text-decoration:none;
font-size:11px;
font-family:verdana;
color:#000000;
padding:3px;
}
.normtext{
cursor:default;
color:#006699;
font-size:11px;
font-family:verdana;
font-weight:bold;
padding:3;
}
#conmenu {
position:absolute;
top:0px;
left:0px;
visibility:hidden;
background-color:#f0f0f0;
layer-background-color:#f0f0f0;
border:outset 2px;
font-size:11px;
font-family:verdana;
font-weight:normal;
width:150px;
padding:1 2 0 2;
z-index:2;
}
#conshadow{
position:absolute;
top:0px;
left:0px;
visibility:hidden;
background-color:black;
layer-background-color:#333333;
z-index:0;
}
</style>
La prima classe (chiamata "link") serve a personalizzare il testo delle voci linkate. si potrà modificare, ad esempio, il colore, la grandezza e il tipo di font.
La classe "normtext" si riferisce al testo che non contiene link.
Le ultime due classi indicano, rispettivamente, l'aspetto grafico del menù contestuale e le caratteristiche dell'ombra del menù.
Successivamente, subito dopo il tag <body>, inseriamo il codice javascript del menù:
<script type="text/javascript" language="javascript">
var menuNormColor="#f0f0f0"; //NORMAL COLOR OF THE MENU ITEMS
var menuHoverColor="#6873f8"; //COLOR OF THE MENU ITEMS ONMOUSEOVER
var enableShadow=true; //SET TO "true" TO ENABLE SHADOW, "false" TO DISABLE IT.
var enableShadowTransparency=true; //SET TO "true" TO ENABLE SHADOW SEMI-TRANSPARENCY (ie4+, ns6+ ONLY), "false" TO DISABLE IT.
var disableNS4=false; // BECAUSE THE MENU DOESNT LOOK RIGHT WHEN THE PAGE CONTAINS FORMS IN NS4, SET THIS VALUE TO
// "true" TO DISABLE THIS CONTEXT MENU AND USE THE DEFAULT ONE. THIS EFFECTS NS4.X ONLY.
var menu=new Array();
menu[0]=['<div align="center">.: JavaScript :.</div>'];
menu[1]=['Alert Box' , 'javascript:alert('Ma ciao! Io sono un altert!')' ,
''];
menu[2]=['Contact' , 'mailto:lorenzofortim@html.it' , ''];
menu[3]=['Stampà , 'javascript:window.print();' , ''];
menu[4]=['Aggiorna la paginà , 'javascript:history.go(0)', ''];
menu[5]=['Codice sorgentè , 'view-source:'+location.href, ''];
menu[6]=['<div align="center">.: Link utili :.</div>'];
menu[7]=['Html.it' , 'http://www.html.it' , '_blank'];
menu[8]=['Forum' , 'http://forum.html.it' , '_blank'];
menu[9]=['Freephp' , 'http://freephp.html.it' , '_blank'];
menu[10]=['<div align="center">Tasto destro per chiudere il menù</div>'];
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true :
false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )?
true: false;
w3c = (document.getElementById)? true : false;
var mx=0;
var my=0;
var conmenu;
var conshadow;
var windowloaded=false;
var opened=false;
var ch=0;
var cw=0;
function setc(ref,c){
if(ns4)ref.bgColor=c;
else ref.style.backgroundColor=c;
}
var txt='<div id="conshadow"> </div>';
txt+='<div id="conmenu">';
for(i=0;i<menu.length;i++){
if(menu[i].length<3){
txt+='<ilayer><div class="normtext">'+menu[i][0]+'</div></ilayer>';
}else{
txt+=(ns4)?'<ilayer width="100%" bgcolor="'+menuNormColor+'"><layer width="100%"
onmouseover="setc(this,''+menuHoverColor+'')" onmouseout="setc(this,''+menuNormColor+'')">':'<div class="link"
style="background-color:'+menuNormColor+'" onmouseover="setc(this,''+menuHoverColor+'')"
onmouseout="setc(this,''+menuNormColor+'')">';
txt+='<a href="'+menu[i][1]+'" target="'+menu[i][2]+'"
class="link">'+menu[i][0]+'</a>';
txt+=(ns4)?'</layer></ilayer>':'</div>';
}}
txt+='</div>';
document.write(txt);
function ns4trap(evt){
if(evt.which==2||evt.which==3){
showmenu();
return false;
}}
function showmenu(){
if(windowloaded){
if(opened){
if(ns4){
conmenu.visibility="hide";
conshadow.visibility="hide";
conmenu.moveTo(0,0);
conshadow.moveTo(0,0);
}else{
conmenu.style.visibility="hidden";
conshadow.style.visibility="hidden";
conmenu.style.left='0px';
conmenu.style.top='0px';
conshadow.style.left='0px';
conshadow.style.top='0px';
}
opened=false;
}else{
opened=true;
var wh=(ie4||ie5)?document.body.clientheight:window.innerheight;
var ww=(ie4||ie5)?document.body.clientwidth:window.innerwidth;
var sx=(ie4||ie5)?document.body.scrollLeft:pageXOffset;
var sy=(ie4||ie5)?document.body.scrollTop:pageYOffset;
if(ie4||ie5){
if(mx+cw+13>=ww)mx=mx-cw-13;
if(my+ch+13>=wh)my=my-ch-13;
}else{
if(mx+cw-sx+13>=ww)mx=mx-cw-13;
if(my+ch-sy+13>=wh)my=my-ch-13;
}
if(ns4){
conmenu.moveTo(mx,my);
conmenu.visibility="show";
conshadow.moveTo(mx+8,my+8);
if(enableShadow)conshadow.visibility="show";
}else{
conmenu.style.left=mx+((ie4||ie5)?sx:0)+'px';
conmenu.style.top=my+((ie4||ie5)?sy:0)+'px';
conshadow.style.left=mx+10+((ie4||ie5)?sx:0)+'px';
conshadow.style.top=my+10+((ie4||ie5)?sy:0)+'px';
setTimeout('conmenu.style.visibility="visible";
if(enableShadow)conshadow.style.visibility="visible"; ',50);
}}}}
if(ns4&&!disableNS4){
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE);
document.onmousedown=ns4trap;
}else{
document.oncontextmenu=function(){
showmenu();
return false;
}}
document.onmousemove=function(evt){
mx=(ie4||ie5)?event.clientX:evt.pageX;
my=(ie4||ie5)?event.clientY:evt.pageY;
}
window.onload=function(){
windowloaded=true;
conmenu=(ns4)?document.layers['conmenù]:(ie4)?document.all['conmenù]:document.getElementById('conmenù);
conshadow=(ns4)?document.layers['conshadow']:(ie4)?document.all['conshadow']:document.getElementById('conshadow');
ch=(ns4)?conmenu.document.height:(ie4||ie5)?conmenu.clientheight:conmenu.offsetheight;
cw=(ns4)?conmenu.document.width:(ie4||ie5)?conmenu.clientwidth:conmenu.offsetwidth;
if(ns4){
conshadow.clip.height=conmenu.document.height;
conshadow.clip.width=conmenu.document.width;
conmenu.clip.bottom=conmenu.document.height;
}else{
if(enableShadowTransparency){
if(ie4||ie5)conshadow.style.filter="alpha(opacity=50)";
if(ns6||!ie4||!ie5)conshadow.style.MozOpacity=.5;
}
conshadow.style.height=ch+((ie4||ie5)?4:0);
conshadow.style.width=cw+((ie4||ie5)?4:0);
}
}
window.onresize=function(){
if(ns4)setTimeout('history.go(0)',200);
}
</script>
Vediamo cosa personalizzare:
var menuNormColor="#f0f0f0";
colore di sfondo delle aree contenenti le voci del menù
var menuHoverColor="#6873f8";
colore di sfondo per le voci onMouseOver
var enableShadow=true;
abilita o disabilita l'effetto ombra. possibili valori: "true" e "false"
var enableShadowTransparency=true;
abilita o disabilita l'effetto semitrasparenza dell'ombra. possibili valori: "true" e "false".
valido solo per Internet Explorer 4.x e Netscape 6.x
var disableNS4=false;
lo script ha dei problemi con Navigator 4.x quando nella pagina sono presenti gli elementi di un modulo (il menù in pratica viene nascosto dai campi form, dalle select etc).
settando questa variabile su "true" si ha la possibilità, valida solo per Navigator, di disabilitare il codice (e di far comparire il menù classico quindi).
Gli array delle voci, invece, sono così strutturati:
menu[0]=['<div align="center">.: JavaScript :.</div>'];
menu[1]=['Alert Box' , 'javascript:alert('Ma ciao! Io sono un altert!')' ,
''];
menu[2]=['Contact' , 'mailto:lorenzofortim@html.it' , ''];
menu[3]=['Stampà , 'javascript:window.print();' , ''];
menu[4]=['Aggiorna la paginà , 'javascript:history.go(0)', ''];
menu[5]=['Codice sorgentè , 'view-source:'+location.href, ''];
menu[6]=['<div align="center">.: Link utili :.</div>'];
menu[7]=['Html.it' , 'http://www.html.it' , '_blank'];
menu[8]=['Forum' , 'http://forum.html.it' , '_blank'];
menu[9]=['Freephp' , 'http://freephp.html.it' , '_blank'];
menu[10]=['<div align="center">Tasto destro per chiudere il menù</div>'];
Come ormai sappiamo, per aggiungere o togliere una voce, è importante seguire la numerazione progressiva tra le parentesi quadrate.
Vediamo le differenze tra una voce con link ed una senza.
Per inserire un testo senza collegamento basterà scrivere ciò che vogliamo tra due parentesi e due apici singoli:
menu[11]=['Io sono un testo senza link'];
Per inserire una voce linkata, invece, dovremo inserire nelle parentesi quadre tre "blocchi", delimitati da apici singoli e separati da una virgola.
Il primo blocco indica il testo del link; il secondo blocco contiene il relatico URL; l'ultimo blocco, infine, indica l'eventuale target (ma potrà anche essere lasciato vuoto).
Ecco un esempio:
menu[12]=['Clicca e godi' , 'http://www.html.it' , '_new'];
Per mantenere la pagina più ordinata consiglio di inserire il codice javascript in un file .js esterno e di richiamarlo con questa stringa:
<script language="javascript" src="menu.js"></script>
Altre modifiche non sono necessarie.
