element creator

creador de elementos

Una biblioteca que ayuda a crear elementos HTML interactivos (doming virtual) fácilmente. Inspirado en el marco de MithrilJs.

• Instalación
• Ejemplos
• Documentación

Instalación

element-creator está disponible en NPM y como biblioteca de Javascript.

Instalar en NPM

 npm install element-creator

O incluir en el archivo html en unpkg

 < script  type =" text/javascript " src =" https://unpkg.com/[email protected]/build/element-creator.min.js " > </ script > 

Ejemplos:

Un ejemplo de contenido de una página ubicado en build/index.html . O una demostración rápida a continuación

 // using node with es6, otherwise var e = require('element-creator');
import e from 'element-creator' ;

var myDiv = e ( 'div#myElement.class__1[name=awesome-div]' , 'My awesome div' , {
    on : { 'click' : function ( e ) {
        alert ( 'You have clicked on My awesome div' ) ;
    } }
} )

La variable myDiv anterior genera un elemento html div con un evento click que genera un mensaje de alerta.

 < div id =" myElement " class =" class__1 " name =" awesome-div " > My awesome div </ div > 

Documentación

element-creator contiene Elementextended (o contenedor) que envuelve/agrega funciones interactivas como .find , .all al elemento estándar y ElementCreator que crea elementos HTML, luego envuelve y devuelve un elemento ElementExtended.

Creador de elementos

 // vdom return new element
var vdom = e ( elementString , children , options )

Dónde:

• elementString es una cadena que especifica la creación de los parámetros del elemento con el siguiente patrón:

{elementType}{(*)elementId}{(*)elementClasses}{(*)elementAttributes}

(*) es opcional

Parámetros	Por defecto	Descripción	Ejemplo
tipo de elemento	div	Tipo de elemento o tipo de etiqueta del elemento	p o h1 . Usar valor predeterminado en caso de que quede vacío
ID de elemento		ID del elemento	#firstParagraph
clases de elementos		Clases de elementos	.class__1 o múltiples clases .class__1.class_2
elementoAtributos		Atributos del elemento	[name=title] o múltiples atributos [name=title,ref=titleRef]

• Children es un nodo de texto o elementos html que permanecen dentro del elemento.

• opciones de otra configuración que incluyen:

  • encendido: agregar detector de eventos
  • attrs: atributos del elemento
  • datos: datos del elemento

ElementoExtendido

 // wrappedElement return a html element within the html body with more interactive functions
var wrappedElement = e . wrap ( querySelector , isMultiple )

Dónde:

• querySelector es una cadena de selección de consultas estándar, por ejemplo, h1 buscará el encabezado h1 , .class__1 buscará cualquier elemento que tenga la clase .class__1 .
• isMultiple es false de forma predeterminada. Si se establece en true devolverá una matriz de elementos que coincidan con querySelector.