element creator

criador de elemento

Uma biblioteca que ajuda a criar elementos HTML interativos (dom virtual) facilmente. Inspirado na estrutura do MithrilJs.

• Instalação
• Exemplos
• Documentação

Instalação

element-creator está disponível no NPM e como uma biblioteca Javascript.

Instalar no NPM

 npm install element-creator

Ou inclua no arquivo html no unpkg

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

Exemplos:

Um exemplo de conteúdo de uma página localizado em build/index.html . Ou uma rápida demonstração abaixo

 // 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' ) ;
    } }
} )

A variável myDiv acima gera o elemento div html com evento click que sustenta uma mensagem de alerta.

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

Documentação

element-creator contém Elementextended (ou wrapper) que agrupa/adiciona funções interativas como .find , .all ao elemento padrão e ElementCreator que cria elementos HTML, em seguida, agrupa e retorna um elemento ElementExtended.

ElementCreator

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

Onde:

• elementString é uma string que especifica a criação dos parâmetros do elemento com o seguinte padrão:

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

(*) é opcional

Parâmetros	Padrão	Descrição	Exemplo
elementoType	divisão	Tipo de elemento ou tipo de tag do elemento	p ou h1 . Use a caixa padrão deixada em branco
elementoId		ID do elemento	#firstParagraph
elementClasses		Classes de elementos	.class__1 ou múltiplas classes .class__1.class_2
elementoAttributes		Atributos do elemento	[name=title] ou vários atributos [name=title,ref=titleRef]

• filhos são nós de texto ou elementos HTML que ficam dentro do elemento.

• opções de outras configurações, incluindo:

  • ativado: adicionar ouvinte de evento
  • attrs: atributos do elemento
  • dados: dados do elemento

Elemento Estendido

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

Onde:

• querySelector é uma string de seletor de consulta padrão, por exemplo h1 procurará o título h1 , .class__1 procurará qualquer elemento que tenha classe .class__1 .
• isMultiple é false por padrão. Se definido como true retornará uma matriz de elementos correspondentes a querySelector.