contextMenoo es una simple y muy ligera solución basada en mooTools, para implementar menúes contextuales en tus proyectos web. Surge derivado del ruido que hizo en la web de forma inmediata, el script original proto.Menu, el cual está basado en prototype, y cuyo autor es Juriy Zaytsev.

Características:

• Ligero. 1.9kb
• No obstrusivo. Si deshabilitas Javascript, el menú contextual propio del navegador aparecerá normalmente.
• Cross-browser. Soportado por la mayoría de los navegadores. (En el caso de opera, es soportado con ctrl+click izquierdo)
• Personalizable. Utiliza hojas de estilo externas, para manejar el estilo al gusto o según el estilo de la página donde se usará. Es posible utilizar temas predifinidos, y cambiarlos en el momento es que se requiera.
• Rápido. El menú se crea sólo al cargar la página, y luego unicamente cambia de posición.

Especificaciones

• Requiere MooTools v1.11
  • Dependencias:
    • Core: core.js
    • Class: Class.js, Class.Extras.js
    • Native: Array.js, String.js, Function.js, Number.js, Element.js
    • Element: Element.Event.js, Element.Filters.js, Element.Selectors.js, Element.Dimensions.js
    • Window: Window.Size.js, Window.DomReady.js
    • Effects: Fx.Base.js, Fx.CSS.js, Fx.Style.js
• Probado en: Internet explorer 6, safari 3.03, Firefox 2.0.0.6, Opera 9.23. Todos en versiones para windows.
• Última modificación: 30 de Agosto de 2007.
• Autor: Daniel Niquet.
• versión: 0.6

Instalación y uso

• Descarga contextMenoo, y agrega en la sección HEAD de tu proyecto
  <script type=”text/javascript” src=”js/mootools.v1.11.js”></script>
  <script type=”text/javascript” src=”js/contextMenoo.js”></script>
• Agrega el estilo. Puedes hacerlo con el estilo que viene por default
  <link rel=”stylesheet” href=”contextMenoo.css” type=”text/css” media=”screen” />
• Crea un arreglo de los enlaces a mostrar en el menú.
  var myLinks = [
  {name: ‘Back’, callback: function(){alert(’back function called’)}},
  {name: ‘Forward’, callback: function(){alert(’Forward function called’)}},
  {separator: true},
  {name: ‘Reload’, callback: function(){alert(’Reload function called’)}},
  {name: ‘Disabled option’, disabled: true},
  {name: ‘Toggle previous option’, callback: function(){
  var item = oLinks.find(function(l){return l.name == ‘Disabled option’});
  item.disabled = item.disabled == false ? true : false;
  }}
  ]
• Crea la instancia para la clase contextMenoo, y pasale como parametro el arreglo definido en el punto anterior.
  <script type=”text/javascript”>
  new contextMenoo({
  selector: ‘.contextmenu’ // clase del elemento al hacer click
  className: ‘myContextMenu’, // clase para estilizar el menu
  menuItems: myLinks // el arreglo de enlaces
  })
  </script>

Ejemplo Funcionando

Descarga

• ZIP con el MooTools a la medida, ejemplos y contextMenoo (15 kb)
  DESCARGAR contextMenoo

Cambios

•  0.6:
  • Bug corregido en internet explorer. Al dar click derecho sobre una parte fuera del elemento, salía el menú contextual propio del navegador, pero no desaparecía contextMenoo.

RSS 2.0 | comenter | trackback