¿Quieres incluir un menú contextual en tu página web? Puedes hacerlo de una forma sencilla incorporando el plugin ContextMenu de jQuery. Se trata de un plugin ligero que te permite sobrescribir selectivamente el menú contextual del navegador al pulsar sobre el botón derecho del ratón. También comentaré la forma de que responda tanto a la pulsación sobre el botón derecho como al izquierdo.
Sus características son las siguientes:
- Uso de múltiples menús diferentes en un página
- Un menú puede ser asociado para que responda a varios elementos de la página
- Los estilos de los menús son totalmente personalizables
- Permite opciones de menú con iconos
- Acciones asociadas a callbacks sensibles al contexto.
El único requisito es haber incluido en la aplicación el framework jQuery. Funciona en todos los navegadores, por lo que no tendremos problemas con compatibilidades. Puedes descargarlo desde aquí: jquery.contextmenu.r2.js para incluirlo en tus páginas o aplicaciones web
Uso
La estructura del menú se construye con HTML, incluyendo cada opción de menú en una lista no ordenada dentro de una capa, con la clase «contextMenu» y con el id que prefieras y que utilizarás para referenciarlo. Dentro de la página esta capa puede ir en cualquier posición.
Puedes definir tantos menús como necesites. Cada elemento <li> de la lista de la capa actuará como una opción de menú. Dando a cada <li> un id único las acciones pueden ser ligadas a ese menú.
A continuación se muestra un ejemplo. En la página HTML incluiremos el código del div del menú con las opciones que necesitamos:
<div id="myMenu1" class="contextMenu" style="display: none">
<ul>
<li id="open"><img src="folder.png" /> Open</li>
<li id="email"><img src="email.png" /> Email</li>
<li id="save"><img src="disk.png" /> Save</li>
<li id="close"><img src="cross.png" /> Close</li>
</ul>
</div>
El código javascript para enlazar cada opción con el código a ejecutar es el siguiente:
$('span.demo1').contextMenu('myMenu1', {
bindings: {
'open': function(t) {
alert('Trigger was '+t.id+'\nAction was Open');
},
'email': function(t) {
alert('Trigger was '+t.id+'\nAction was Email');
},
'save': function(t) {
alert('Trigger was '+t.id+'\nAction was Save');
},
'delete': function(t) {
alert('Trigger was '+t.id+'\nAction was Delete');
}
}
});
Parámetros
menu_id: Puedes asociar uno o más elementos de la página a un menú. Por ejemplo si invocamos al context menú de esta forma $("table td").contextMenu("myMenu1"), todas las celdas de una tabla mostrarán el menú al pulsar sobre ellas el botón derecho.
Configuración: Podemos usar la configuración por defecto o bien podemos opcionalmente modificarla. En el ejemplo de arriba hemos visto cómo asociar la acción que se va a ejecutar para cada id del menú. Para añadir más deben ir separados por comas. El elemento que dispara el menú actual es pasado como parámetro.
- menuStyle: Contiene pares nombre-valor para aplicar estilos al tag <ul> del menú.
- itemStyle: Contiene pares nombre-valor para aplicar estilos a los elementos <li> del menú
- itemHoverStyle: Idéntico al anterior pero aplica cuando se pasa el ratón sobre el elemento <li>, para resaltarlo, etc.
- shadow: Boolean que identifica si se quiere mostrar la sombra del menú. Por defecto es true.
Puedes ver más en la página oficial del plugin. También es posible ampliar las opciones por defecto de todos los menús invocando al método defaults. Cualquier configuración excepto bindings puede ser usado como por defecto:
$.contextMenu.defaults({
menuStyle : {
border : "2px solid green"
},
shadow: false,
onContextMenu: function(e) {
alert('Did someone asked for a context menu?!');
}
});
Menú contextual pulsando el botón izquierdo del ratón
Por defecto, este plugin funciona pulsando sobre el elemento que queremos que muestre el menú, con el botón derecho del ratón. Para modificar este comportamiento, y que se muestre igualmente al pulsar sobre el botón izquierdo, debemos abrir el fichero descargado del plugin (jquery.contextmenu.r2.js) y abrirlo para editar. Necesitamos modificar la línea:
return $(this).bind('contextmenu', function(e) {por esta otra:
return $(this).bind('click', function(e) {
