Contenido

X-Tags, crea tus propios elementos HTML con funcionalidad javascript

30 Jul

+ 38

<x> o X-Tags, es una librería javascript que nos permitirá definir elementos HTML propios cargados con la funcionalidad que deseemos de una forma fácil y rápida.

La idea detrás de esta librería es que el diseño simplemente tenga que conocer el elemento HTML a crear y su estructura. Además, se basa en el estandar de Web Components y los Custom Elements, que nos permite definir elementos propios contemplados en los estandares modernos. Hasta el momento, la mejor opción es usar algún elemento HTML disponible e intentar que tenga algún sentido semántico en nuestro código.

Por lo tanto, si nuestros maquetadores conocen el código HTML que hemos definido previamente, por ejemplo este acordeón:


// HTML
<x-accordion>
    <x-toggler selected="true">Toggler 1</x-toggler>
    <div>Panel 1</div>
    
    <x-toggler>Toggler 2</x-toggler>
    <div>Panel 2</div>
    
    <x-toggler>Toggler 3</x-toggler>
    <div>Panel 3</div>
</x-accordion>

Nosotros solo tendremos que registrar el elemento con las características que nosotros deseemos.


// Javascript
xtag.register('accordion', {
    onCreate: function(){
        // Se ejecutará cuando un elemento es creado o parseado
    },
    onInsert: function(){
        // Se ejecutará cuando un elemento es insertado en el DOM
    },
    events: {
        'click:delegate(x-toggler)': function(){
            // Se ejecuta cuando un toggler es ejecutado.
        }
    },
    getters: {
        'togglers': function(){
            // Devuelve todos los elementos togglers.
        }
    },
    setters: {
        // Añade Objetos DOM
    },
    methods: {
        nextToggler: function(){
            // Activa nuevo toggle
        },
        previousToggler: function(){
            // Activa el toggle previo
        }
    }
});

Y todo ello, siendo disponible para la mayoría de navegadores de escritorio y todos los móviles. Ver más ejemplos