En la puerta del Horno: aAnyTabs

La sección de laboratorio es una sección en que aplico tecnologías, experimento con nuevas herramientas y soluciono problemas simples que enfrento a diario.

Para inaugurar el laboratorio voy a comentarles un plugin que tengo en la puerta del horno, es decir, casi listo para ser publicado como plugin. Para seguir la tónica de desarrollo de plugins que inicié el año paso, hice otro plugin usando jQuery. Básicamente seguí con jQuery porque es un framework muy simple de entender debido a que Javascript también lo es.

La situación que enfrenté y la que instó la creación de este plugin está relacionada con la creación de tabs. Me encontraba con Carlos Elías trabajando en un sitio web y tuvimos la necesidad de mostrar contenido en secciones, casi como tabs. A él se le ocurrió la idea de hacer un código que relacionara el "id" de una lista con los "data-id" de unos divs. Efectivamente era una solución simple y totalmente aplicable a un concepto básico de "tabs"; pero hacer un plugin de eso es hacer más de lo mismo.

Así que comencé con el código en el header intentando relacionar "id’s" y ahí fue que se me ocurrió la idea de relacionar posiciones de la lista en lugar de atributos escritos en el código. Básicamente el planteamiento es relacionar el lugar del "link" donde hiciste click con el lugar del contenido, así que lo que primero que desarrollé fue relacionar una lista "

  • " con un "
    " que tiene varios "

    " dentro, y que a su vez tienen contenido. Sé que no se entiende pero, vean las siguientes imágenes:

    ¿Vieron? Entonces cuando digo, "al hacer click en el primer elemento, dame el index de su parent y muestra el

    que corresponde a su index. Si hacen click en 0 se muestra el 0, y así.

    La idea parecía funcionar bien pero lo más interesante que después me decidi por relacionar cualquier cosa con cualquier cosa, luego poner efectos y muchas cosas más. Así que el plugin lo lanzaré la otra semana con más documentación y tutoriales.

    Por ahora pueden ver la versión minificada, pruébenla y me cuentan!

Labs
1 minuto