Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

Menús contextuales con jQuery

Escrito por: Martín el 06-01-2009 19:04:39

Menús contextuales con jQuery

Con este plugin de jQuery podemos personalizar el menú contextual que vemos al hacer clic con el botón derecho de nuestro ratón.

Mientras leía el post de uno de sus creadores, me encontré con que hay otro plugin que cumple similar tarea por lo que dejo los links a ambos recursos que me parecen por igual de interesantes.

Menú 1: Ver web | ver demo
Menú 2: Ver web y demo

En el caso del primer menú, su uso es muy fácil... (ver códigos 1 y 2).

En el caso del menú 2, les aconsejo mirar la web de su creador que tiene muchos ejemplos.

Código XHTML

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edit</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Cut</a>
    </li>
    <li class="copy">
        <a href="#copy">Copy</a>
    </li>
    <li class="paste">
        <a href="#paste">Paste</a>
    </li>
    <li class="delete">
        <a href="#delete">Delete</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quit</a>
    </li>
</ul>

Código JAVASCRIPT

$(document).ready( function() {
   
    $("#selector").contextMenu({
        menu: 'myMenu'
    },
        function(action, el, pos) {
        alert(
            'Action: ' + action + 'nn' +
            'Element ID: ' + $(el).attr('id') + 'nn' +
            'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)nn' +
            'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
            );
    });
   
});