element creator

créateur d'éléments

Une bibliothèque qui permet de créer facilement des éléments HTML interactifs (dom virtuel). Inspiré du framework MithrilJs.

• Installation
• Exemples
• Documentation

Installation

element-creator est disponible sur NPM et en tant que bibliothèque Javascript.

Installer sur NPM

 npm install element-creator

Ou inclure dans un fichier HTML sur unpkg

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

Exemples :

Un exemple de contenu d'une page situé à build/index.html . Ou une démo rapide ci-dessous

 // 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 ci-dessus génère un élément HTML div avec un événement click qui génère un message d'alerte.

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

Documentation

element-creator contient Elementextended (ou wrapper) qui encapsule/ajoute des fonctions interactives telles que .find , .all à l'élément standard et ElementCreator qui crée des éléments HTML, puis enveloppe et renvoie un élément ElementExtended.

Créateur d'éléments

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

Où:

• elementString est une chaîne qui spécifie la création des paramètres de l'élément avec le modèle suivant :

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

(*) est facultatif

Paramètres	Défaut	Description	Exemple
Type d'élément	div	Type d'élément ou type de balise de l'élément	p ou h1 . Utiliser la valeur par défaut dans le cas laissé vide
IDélément		ID de l'élément	#firstParagraph
classes d'éléments		Classes d'éléments	.class__1 ou plusieurs classes .class__1.class_2
elementAttributes		Attributs des éléments	[name=title] ou plusieurs attributs [name=title,ref=titleRef]

• children est un nœud de texte ou des éléments HTML qui restent à l'intérieur de l'élément.

• options d'autres configurations, notamment :

  • activé : ajouter un écouteur d'événement
  • attrs : attributs de l'élément
  • data : données de l'élément

ÉlémentExtended

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

Où:

• querySelector est une chaîne de sélecteur de requête standard, par exemple h1 recherchera l'en-tête h1 , .class__1 recherchera tout élément de classe .class__1 .
• isMultiple est false par défaut. S'il est défini sur true il renverra un tableau d'éléments correspondant à querySelector.