Píldoras jQuery VI – Un menú contextual

En el capítulo anterior vimos, de manera general y con un par de ejemplos, cómo tratar eventos de teclado y de ratón. En este post vamos  a seguir con esta temática.

Uno de las características más comunes en las aplicaciones web es la aparición de un menú contextual cuando pulsamos el botón derecho del ratón. No es algo complicado pero debemos de tener en cuenta que, por defecto, se nos mostrará el menú contextual del propio navegador. Tomemos como ejemplo el siguiente ejemplo de código:

See the Pen jQuery (Capturing mouse right click but showing browser’s context menu) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Podría pensarse que al capturar el evento con código 3 es nuestro menú el que se va a mostrar, pero no, prevalece el menú contextual del navegador. Para evitar eso podemos optar por lo siguiente (hay muchas más posibilidades de hacerlo):

 

See the Pen jQuery (How to show a context menu in the right way) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Las claves de que funcione se encuentran en los siguiente apartados:

  • Capturo el evento contextmenu en vez de click
  • Hago un return false para que ese evento no se tratado por el navegador (sería lo mismo si hiciera primero event.prevendefault() y event.stopPropagation() )

Y esto es todo…muy sencillo pero en un principio el funcionamiento del navegador puede desconcertar. En el próximo post repasaremos los selectores jQuery, uno de los elementos más importantes si queremos dominar esta tecnología.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Píldoras jQuery IV – Menú anidado de 3 niveles

Cuarta entrega de la serie. Esta vez un ejemplo muy usado: un menú anidado de tres niveles. El primero de lo niveles será horizontal, el segundo vertical y el tercero será también horizontal tal y como podemos ver en la siguiente imagen:

nested_menus

El ejemplo completo puede descargarse aquí:

El árbol HTML es muy sencillo:

La hoja de estilos CSS es muy sencilla:

Y la parte más importante, el script que define el comportamiento de los menús

Y esto es todo. El próximo tutorial de la serie será mostrar cómo trabajar con algunas de las propiedades de los eventos.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS