jQuery Context Menu: Menu al tasto destro del mouse
Link sponsorizzati
Context Menu
Il menu contestuale (context menu) è quello che appare cliccando con il tasto destro del mouse da qualche parte. Quando lo si fa in una pagina web il menu è quello di default del browser. Tuttavia è possibile fare in modo che quando si clicca su degli elementi di una pagina web (div, span, o, perchè no, tutto il doby) appaia un menù personalizzato che definiamo noi.
In qualche modo abbiamo la possibilità di farlo molto velocemente tramite un plugin jQuery scritto appositamente per lo scopo. Il plugin in questione è jQuery ContextMenu. Usarlo è molto semplice, ed è anche dotato di un buon numero di temi di default che consentono di dare al menu uno stile personalizzato in base alle esigenze. Inoltre è possibile anche definire un menu personalizzato a partire da un semplice div e così via.
Link sponsorizzati
La pagina d’esempio è molto esaustiva e consente di avere una panoramica veloce su tutte le possibilità dello script. E’ presente anche una pagina di documentazione che racchiude al suo interno la spiegazione di ogni proprietà che si può impostare al menù.
Questo è un’esempio stupido che ho scritto al volo per provare lo script in locale
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <!-- jQuery -->
<script type="text/javascript" src="jquery.contextmenu.js"></script> <!-- context menu plugin -->
<link rel="stylesheet" type="text/css" href="jquery.contextmenu.css"></link> <!-- css -->
<script type="text/javascript">
var menu1 = [
{'Visita Google': function(menuItem,menu) { location.href = "http://www.google.it/"; } },
{'Visita Wikipedia': function(menuItem,menu) { location.href = "http://www.Wikipedia.it/"; } },
{'Visita AlterVista': function(menuItem,menu) { location.href = "http://www.altervista.it/"; } },
$.contextMenu.separator,
{'Visita CodeSnippet': function(menuItem,menu) { location.href = "http://codesnippet.altervista.it/"; } }
];
$(function() {
$('.menu').contextMenu(menu1,{theme:'vista', shadow:true});
});
</script>
<title>Context Menu - Demo</title>
</head>
<body>
<div class="menu" style="border:1px solid red;width:500px;height:100%">
clicca con il destro sul box per far apparire il menu contestuale
</div>
</body>
</html>
La parte che conta è sostanzialmente quella racchiusa nel tag script che definisce il menù e le sue azioni
{'Visita Google': function(menuItem,menu) { location.href = "http://www.google.it/"; } },
{'Visita Wikipedia': function(menuItem,menu) { location.href = "http://www.Wikipedia.it/"; } },
{'Visita AlterVista': function(menuItem,menu) { location.href = "http://www.altervista.it/"; } },
$.contextMenu.separator,
{'Visita CodeSnippet': function(menuItem,menu) { location.href = "http://codesnippet.altervista.it/"; } }
];
$(function() {
$('.menu').contextMenu(menu1,{theme:'vista', shadow:true});
});
Lo script funziona su tutti i browser, tranne che su Opera, che non consente l’override del menu contestuale. Tuttavia questa lacuna è stata colmata con la versione 10.5 del browser (per ora ancora in pre-alpha).
Link sponsorizzati
