No hay duda que con esto de las aplicaciones web todo desarrollador o webmaster quiere implementarlas parecidas, en funcionalidad, a las aplicaciones de escritorio. Y esto es posible gracias a la cantidad de librerías ó códigos libres que existen en toda la web. Por ejemplo Harel Malka (vía Ajaxian) veía la necesidad de una menu contextual (esos que aparecen cuando pulsamos el botón derecho del mouse) para un proyecto, y desarrolló una librería en Javascript para ello.

MenuContextual

Caracteristicas

  • Soporta enlaces
  • Soporta llamadas a funciones en Javascript
  • Recupera contenidos mediante Ajax.
  • Muestra separador de elementos.
  • Soporta imagenes para cada elemento del menu.
  • Muestra diferentes tipos de menus dependiendo del elemento HTML donde se hizo clic.
  • Diseño basado en CSS.
  • Y no require ningún otro framework o librería.

Ejemplo Básico [Ver Resultado Final]

<html>
<head>
<script type="text/javascript" src="rightcontext.js"></script>
<link href="rightcontext.css" rel="stylesheet" type="text/css">
<title>Menu en etiquetas Span</title>
</head>
<body>
<h1 align="center">Menu contextual con Javascript</h1>
<p align="center"><span context="actions" a="Elizabeth Avalos" b="eliza@hotmail.com" c="044-220939">Elizabeth Avalos </span></p>
<p align="center"><span context="actions" a="Ferdinan Torrejon" b="ftorres@yahoo.com" c="044-9367845 ">Ferdinan Torrejon</span></p>
<p align="center"><span context="actions" a="Yrhis Manrique" b="yman@gmail.com" c="044-221138">Yrhis Manrique</span></p>
<div align="center">
<script>
   /*Creando el Menu*/
   menu3 = { attributes: "a,b,c",
   items:  [
		   {type:RightContext.TYPE_MENU,
		   text:"Editar datos de [a]",
		   onclick:function() {alert('Aca puede colocar una funcion en Javascript para el proceso de edicion de [a] ')},
		   image: "editar.gif", align:"right" },
		   {type:RightContext.TYPE_MENU,
		   text:"Ver datos de [a]",
		   onclick:function() {alert('Repito: puedes crear una funciona en Javacript para este proceso [b]')},
		   image: "ver.gif", align:"right" },
		   {type:RightContext.TYPE_MENU,
		   text:"Borrar a [a]",
		   onclick:function() {alert('Funcion para eliminar a este empleado')},
		   image: "eliminar.gif", align:"right" },
		   {type: RightContext.TYPE_SEPERATOR },
		   {type:RightContext.TYPE_MENU,
		   text:"Correo electronico [a] &lt;[b]&gt;",
		   onclick:function() {alert('Email seleccionado')} },
		   {type:RightContext.TYPE_MENU,
		   text:"Telefono [a] ([c])",
		   onclick:function() {alert('Telefono seleccionado')} }
   ]
   };
   RightContext.addMenu("actions", menu3);
   RightContext.initialize();
</script>
</div>
</body>
</html>