Menú contextual personalizable para su aplicación con jQuery

Menú contextual personalizable para su aplicación con jQuery. En esta publicación hablaremos de una opción muy interactiva y es nada menos sobre los menús secundarios en nuestros sistemas web. Sin embargo, este funcionara siempre y cuando demos clic derecho al mouse que generara un menú Contextual con varias opciones.

Menú contextual personalizable para su aplicación con jQuery

Hoy en día existen varios sistemas a nivel mundial que usan el botón secundario del mouse, un ejemplo claro es el CPANEL que todo «webmaster» conoce.

Por lo tanto, si somos observadores en la sección de administración de ficheros podemos utilizarlo para:

• Cambiar de nombre
• Editar
• Borrar
• Comprimir y/o descomprimir
• Entre otras opciones.

Ventajas de uso

• Sistema muy dinámica.
• Anidación de menú.
• Clic personalizado.
• Iconos de menú personalizado.
• Atajo para realizar una acción

Cómo implementarlo de manera correcta:

1. Situar la librería jQuery y la hoja de estilo del complemento jQuery «superContextMenu» en el archivo HTML de tu proyecto y/o archivo.

2. En el archivo que deseamos implementar solo debemos declarar la clase derecho derecho

<div class="derecho">
  Realizar Click Derecho!!
</div>

Menú contextual usando jQuery ContextMenu

El código JavaScript encargado de lanzar nuestro menú contextual usando una capa dentro de nuestro sistema web.

<script>
  var myMenu = [{
    // This example uses Font Awesome Iconic Font.
    icon: 'fa fa-home',
    // Menu Label
    label: '<a href="index.html">Inicio</a>',
    // Callback
    action: function(option, contextMenuIndex, optionIndex) {},
    // An array of submenu objects
    submenu: null,
    // is disabled?
    disabled: false   //Disabled status of the option
  },
  {
    icon: 'fa fa-user',
    label: '<a href="perfil.html">Perfil</a>',
    action: function(option, contextMenuIndex, optionIndex) {},
    submenu: null,
    disabled: false
  },
  {
    icon: 'fa fa-envelope',
    label: '<a href="contacto.html">Contáctanos</a>',
    action: function(option, contextMenuIndex, optionIndex) {},
    submenu: null,
    disabled: false
  },
  {
    //Menu separator
    separator: true
  },
  {
    icon: 'fa fa-share',
    label: 'Compartir',
    action: function(option, contextMenuIndex, optionIndex) {},
    submenu: [{ // sub menus
      icon: 'fa fa-facebook',
      label: '<a href="https://www.facebook.com/Baulphp-1484048218538757/" target="_blank">Facebook</a>',
      action: function(option, contextMenuIndex, optionIndex) {},
      submenu: null,
      disabled: false
    },
    {
      icon: 'fa fa-twitter',
      label: '<a href="https://twitter.com/?lang=es" target="_blank">Twitter</a>',
      action: function(option, contextMenuIndex, optionIndex) {},
      submenu: null,
      disabled: false
    },
    {
      icon: 'fa fa-google-plus',
      label: '<a href="https://plus.google.com/" target="_blank">Google Plus</a>',
      action: function(option, contextMenuIndex, optionIndex) {},
      submenu: null,
      disabled: false
    }],
    disabled: false
  },
];
$('.derecho').on('contextmenu', function(e) {
  e.preventDefault();
  superCm.createMenu(myMenu, e);
});
</script>

El complemento permite crear un menú contextual rápido y dinámico. Sin embargo, es fácil de personalizar y crear submenús.

CONCLUSIÓN

La utilización de nuevas opciones para ayudar al usuario final siempre será bien visto. Justamente, en este artículo tratamos de ayudar al desarrollador web en algunos puntos para mejorar su trabajo.

En este ejemplo, estamos añadiendo un menú contextual usando JavaScript y del framework BootStrap para darle la estética debida.

Sin embargo, su uso es muy recomendable y como ya explicamos líneas arriba grandes compañías como CPANEL usan este método para ayudar al WEBMASTER de un portal web.

Su implementación es muy sencillo, nada complicado. Espero que esta breve explicación les ayude en sus trabajos.

No se olviden de comentar y darle me gusta a la página de Facebook BAULPHP

DESCARGA