Crear un menú contextual en JQuery al pulsar el botón derecho del ratón

Bienvenidos a Vertutoriales, en esta ocasión vengo a poner el código y un tutorial en vídeo para explicar una manera de crear un menú contextual para utilizar en nuestras aplicaciones web, todo en JQuery y utilizando listas de html.

jquery
Menú contextual en JQuery

Como ya sabéis (y sino ya lo digo) este código está sacado del editor de escenarios para el juego de Rol que estamos desarrollando. En este editor necesitábamos darle más funcionalidades a la gestión de los objetos en pantalla y una manera eficaz es generando un menú al pinchar sobre el objeto con el botón derecho del ratón, ofreciendo de esta manera unas opciones añadidas a las que pueda haber ya en pantalla.

Para ello vamos a necesitar por un lado las diferentes opciones. Ni que decir que estamos trabajando con JQuery y el framework Bootstrap 3.0. Para las opciones que decíamos, hemos utilizado una lista como la siguiente:

Lista de menú contextual en html

<ul id="menuCapa" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">            
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="bloqueaCapa();">Bloquear edici&oacute;n</a>
            </li>
            <li role="presentation" class="divider"></li>                        
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="alFrenteCapa();">Al frente</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="alFondoCapa();">Al fondo</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="restauraCapa();">Restaurar</a>
            </li>        
            <li role="presentation" class="divider"></li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#" onClick="eliminaCapa();">Eliminar</a>
            </li>
          </ul>

Fijaros que la id de la lista es id=”menuCapa” que utilizaremos más adelante. Además en cada opción del menú podéis comprobar que se ha añadido un evento onClick, que llama a una función que luego ejecutará diferentes opciones, la clase es dropdown-menu para que parezca como decía un bonito menú desplegable en Bootstrap 😉

Luego nos falta la parte que lo hace funcionar en JQuery que os pongo ahora mismo:

Botón derecho en JQuery

$("#capa").mousedown(function(e) {			
			if (e.button == 2){
				$("#menuCapa").css("top", e.pageY - 20);
				$("#menuCapa").css("left", e.pageX - 20);
				$("#menuCapa").show('fast');			
			}
		});

En este reducido código, como podéis ver estoy ubicando la capa “menuCapa” en la posición e.pageY y e.pageX que son las posiciones que nos devuelve el ratón. Por otro lado e.button == 2 es para controlar que botón, en este caso es el botón derecho del ratón

Solo nos faltaría una cosa más, bloquear el menú contextual del propio navegador para que no se solapen ambos menús, para ello solo colocar el siguiente código:

$(document).bind("contextmenu", function(e){  
		 return false;
	});

Nada complicado, es solo introducir en el bind del documento cuando se lance el “contextmenu” simplemente devolver un false en la función y listo!

Ya tendríamos nuestro menú contextual para utilizar en nuestra aplicación web en unos minutos. En el vídeo que os he preparado os muestro exactamente esto pero a viva voz y no tenéis que leer jeje 😉

Como siempre, si os ha gustado podéis compartir y seguirme en youtube o facebook, sino, también podéis comentar para que mejore!

3 comentarios sobre “Crear un menú contextual en JQuery al pulsar el botón derecho del ratón

  • el 11 febrero, 2019 a las 1:54 pm
    Permalink

    Por favor no se si me podrias enviar todo el codigo funcionando sobre el anticlic con jquery

    Respuesta
    • el 11 febrero, 2019 a las 4:00 pm
      Permalink

      Buenas Grover, el código es el expuesto, entiendo por anticlic el botón derecho del ratón:
      $("#capa").mousedown(function(e) {
      if (e.button == 2){
      //aquí lo que quieres con el botón secundario
      }
      });

      Respuesta
  • el 11 febrero, 2019 a las 4:05 pm
    Permalink

    Gracias! Este código para html con JQuery para poner un menú en el botón derecho como en mi sistema operativo es lo que estaba buscando!

    Funciona genial!

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.