Un evento poco conosciuto supportato da jQuery in modo cross-browser è contextmenu, che ci permette di gestire il menu contestuale creato dal browser quando l'utente usa il tasto destro del mouse. Questo evento è molto utile qualora volessimo creare un menu contestuale sostituendo quello predefinito del browser. Vediamo come.
Usare contextmenu
Ecco l'utilizzo di questo evento:
$(elemento).bind('contextmenu', function(e) {
// codice qui
e.preventDefault();
});
preventDefault() impedisce al menu predefinito del browser di essere visualizzato.
Esempio pratico
Abbiamo una galleria di immagini e vogliamo poter mostrare solo un pulsante per scaricare l'immagine selezionata quando l'utente clicca con il tasto destro del mouse sull'immagine.
Per prima cosa creiamo un posizionamento contestuale e degli stili per il pulsante:
#gallery {
padding: 2em 0;
width: 70%;
margin: 0 auto;
height: 300px;
position: relative;
}
div.context-menu {
background: #c40;
color: #fff;
width: 180px;
padding: 10px;
text-align: center;
border-radius: 10px;
position: absolute;
font-family: Arial, sans-serif;
}
div.context-menu a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
display: block;
}
div.context-menu a:hover {text-decoration: underline;}
Con jQuery, creiamo il nostro elemento contestuale e lo inseriamo dopo ciascuna immagine, nascondendolo:
$('img', '#gallery').each(function() {
var $img = $(this);
var contextMenu = '<div class="context-menu">';
var src = $img.attr('src');
contextMenu += '<a href="' + src + '">' + 'Download' + '</a></div>';
$(contextMenu).insertAfter($img)
.hide();
});
Il link punterà all'attributo src dell'immagine. Quindi usiamo l'evento contextmenu e facciamo comparire il nostro elemento sotto l'immagine corrispondente:
$('img', '#gallery').bind('contextmenu', function(e) {
var $img = $(this);
var imgLeft = $img.position().left;
$img.next().animate({
visibility: 'show',
bottom: 0,
left: imgLeft + 80
}, 'slow');
e.preventDefault();
});
L'effetto di comparsa avrà anche un movimento da sinistra verso destra dovuto alla proprietà left che ha come riferimento l'offset sinistro di ciascuna immagine.
Potete visionare l'esempio finale in questa pagina.