Crear menú simple y menú contextual con jQuery UI

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Muchas páginas y aplicaciones web, necesitan implementar en algún momento una opción para que el usuario, de una forma fácil, pueda acceder a determinadas opciones del sitio ( navegación, formularios etc ..) mediante un menú contextual.

Este plugin, que forma parte de la librería jQuery UI, permite hacerlo con muy poco código y además poder acceder a los métodos , funciones y eventos para controlar el comportamiento del menú.

El ejemplo es completamente gratis y de libre uso ( distribuido como Software libre - GPL y licencia MIT ). A continuación se describe como instalarlo y otra información general.

Mas información sobre el programa.

Indice - contenido.

  1. ¿ Qué es jQuery UI ?
  2. Ejemplos del menú contextual en el archivo de descarga.
  3. Instalación y configuración.
  4. Modificar el ancho del menú.
  5. Otras configuraciones y opciones.

 

1 - ¿ Qué es jQuery UI ?

Es una librería de clases, creada medidante jQuery, que te permite no sólo implementar menús para tus páginas y aplicaciones webs, sino muchas otras cosas interesantes, como por ejemplo: animaciones de todo tipo, efectos, barras de progreso, tabs, calendarios, y varios otros controles de usuario.

La página inicial de jQuery UI la puedes acceder en este enlace. Para ir a la página con todos los ejemplos en este otro.

Otro ejemplo para ver en acción los componentes y controles disponibles en jQuery UI, es en este enlace. ( muestra como desplegar calendarios y dtPickers para los campos de un formulario.)

2 - Ejemplos del menú contextual en el archivo de descarga.

El archivo de ejemplo contiene dos formas de utilizar el menú.

Ejecutando el archivo Default.HTML, podrás implementar un menú simple de opciones, como una lista de selección de elementos, es decir que no se comporta como un menú contextual. ( El archivo demo se encuentra contenido dentro de la carpeta Menu)

Nota: En los dos ejemplos, los items muestran un skin en la selección para cada elemento al pasar el mouse encima de ellos. También, es posible desplazarse por los items mediante el teclado, e insertar dos íconos en el botón que despliega el menú contextual. Dichos íconos se definen en el siguiente bloque de código ( Las imágenes se encuentran en la carpeta Themes \ Base \ imagenes. )

Vista previa del menú simple:

Y ejecutando el archivo contextmenu.html el menú contextual.

Vista previa

3 - Instalación y configuración.

Para el funcionamiento, el menú requiere incorporar a la página web los archivos jquery.ui.core.js, jquery.ui.widget.js y jquery.ui.menu.js. en la sección Head del código HTML.

Luego para crear y añadir los elementos del menú contextual, estos deberán estar contenidos dentro de un DIV ( en este caso llamado Demo ), y definirlos en una lista de elementos HTML ( UL Li), por ejemplo:

Nota: el ejemplo incluye como recuperar e imprimir en la misma página el elemento seleccionado por el usuario.

4 - Modificar el ancho del menú.

Para ello localiza la línea de código siguiente e indica el valor para el ancho en pixeles.

5 - Otras configuraciones y opciones.

Para ver y aprender otras características de configuración, puedes leer el archivo que se incluye en la carpeta Documentación ( Carpeta jquery-ui/docs/menu.html ).

Allí podrás encontrar lo siguiente:

  • Iniciar el menú con un elemento específico deshabilitado.
  • Manipular e interactuar con los eventos: De foco, evento de selección, otros.
  • Utilizar los métodos de las clases: Para recuperar y establecer los valores de la lista de elementos, para refrescar y actualizar el listado de items, activar y deshabilitar, entre otros.
  • Como cambiar el tema o skin utilizado.

Requerimientos de instalación y uso.

Requiere : Ver archivos CSS y Javascript definidos en la sección HEAD.


Videos tutoriales.

No hay mas capturas.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://jqueryui.com/
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:
02 DIC 2010


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: