jYADDM v0.1

2008 Aug 16 • 2 comentarios coding, javascript, jquery

O qué hacer en un sábado por la tarde.

JQuery es un framework de Javascript que simplifica la manipulación del DOM (los elementos que conforman una página web) y asiste en la creación de llamadas asíncronas con el servidor (AJAX) para mejorar la experiencia del usuario al usar una página web. JQuery te permite crear “plugins”. Objetos en javascript que definen propiedades y funciones específicas.

jYADDM (yet another drop down menu) es mi primer plugin y tiene estas características:

Tiene la funcionalidad básica de un menú drop down (al mover el mouse sobre en el menú padre, aparecen los menús hijos).
Usa elementos “lista” (ul, li).
Puede ser utilizado más de una vez en la página.
Permite el filtrado de los menús basándose en las teclas que el usuario oprima.
Esta es la estructura básica del menú:

<div class="menu">
<div class="parent">Estados</div>
<ul id="estados" class="child">
        <li><input class="selector" type="text" /></li>
        <li>Aguascalientes</li>
        <li>Baja California</li>
        <li>Baja California Sur</li>
        <li>Campeche</li>
        <li>Chiapas</li>
        <li>Chihuahua</li>
        <li>Coahuila</li>
        <li>Colima</li>
        <li>Distrito Federal</li>
        <li>Durango</li>
        <li>Guanajuato</li>
        <li>Guerrero</li>
</ul>
</div>

El objeto ul aparece cuando el mouse pasa sobre el div “estados” y pasamos el focus a la caja de texto. Conforme el usuario va tecleando, los elementos li son filtrados.

No está completo, es una primera versión (espero terminarla pronto), pero la comparto por si a alguien le sirve.

To do:
1. Remarcar el texto encontrado en cada elemento
2. Mejorar el uso de las teclas “enter” y “esc”

Demo, Download

Ideas y sugerencias son bienvenidas