<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
32 comentarios, 1 referencias
+
#