Skip navigation

jQuery ListMenu es un plugin que, a pesar de su simplicidad, me ha resultado muy interesante. Permite generar una especie de menú completamente personalizable en base a una lista de elementos.

listmenuLa idea es recorrer todos los registros de la lista y organizarlos en pestañas en base a su letra inicial. Al situarse con el cursor encima de una letra, el plugin te indicará el número de registros incluídos en esa sección y despliega un submenú con los elementos.

Los autores del plugin comentan que es ideal para webs en las que se informa sobre listas de productos, direcciones, listas de contactos, hoteles…

Para hacer funcionar el plugin tan solo necesitamos declarar la lista deseada y llamar a la función, sobreescribiendo los valores por defecto si lo deseamos:

<ul id=”myList”>
<li><a href=”#”>A item</a></li>
<li><a href=”#”>B item</a></li>
<li><a href=”#”>C item</a></li>

</ul>

<script type=”text/javascript”>
$(function(){
$(‘#myList’).listmenu({
noMatchText: ‘No hay elementos en esta letra.’,
});
});
</script>

Pero sobre todo recomiendo el plugin para estudiarlo en profundidad. Si estais comenzando en el desarrollo de plugins con jQuery, éste es un ejemplo magnífico de cómo recorrer elementos, asignar clases de estilo, manejar la anchura y altura y declarar funciones en el evento click y hover de un enlace.

Visitar la página del plugin y ver los ejemplos.

Anuncios

One Trackback/Pingback

  1. By Bitacoras.com on 07 Abr 2009 at 5:16 pm

    Información Bitacoras.com…

    Valora en Bitacoras.com: jQuery ListMenu es un plugin que, a pesar de su simplicidad, me ha resultado muy interesante. Permite generar una especie de menú completamente personalizable en base a una lista de elementos. La idea es recorrer todos los re…..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: