element creator

Element-Schöpfer

Eine Bibliothek, die die einfache Erstellung interaktiver HTML-Elemente (virtueller Dom) unterstützt. Inspiriert vom MithrilJs-Framework.

• Installation
• Beispiele
• Dokumentation

Installation

element-creator ist auf NPM und als Javascript-Bibliothek verfügbar.

Auf NPM installieren

 npm install element-creator

Oder in die HTML-Datei bei unpkg einbinden

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

Beispiele:

Ein Beispiel für einen einseitigen Inhalt finden Sie unter build/index.html . Oder eine kurze Demo unten

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

Die obige Variable myDiv generiert div HTML-Element mit click , das eine Warnmeldung auslöst.

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

Dokumentation

element-creator enthält Elementextended (oder Wrapper), das interaktive Funktionen wie .find , .all zum Standardelement umschließt bzw. hinzufügt, und ElementCreator , das HTML-Elemente erstellt, dann ein ElementExtended-Element umschließt und zurückgibt.

ElementCreator

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

Wo:

• elementString ist eine Zeichenfolge, die die Erstellung der Elementparameter nach folgendem Muster angibt:

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

(*) ist optional

Parameter	Standard	Beschreibung	Beispiel
elementType	div	Typ des Elements oder Tag-Typ des Elements	p oder h1 . Standard-Incase verwenden, leer gelassen
elementId		ID des Elements	#firstParagraph
Elementklassen		Elementklassen	.class__1 oder mehrere Klassen .class__1.class_2
elementAttribute		Elementattribute	[name=title] oder mehrere Attribute [name=title,ref=titleRef]

• Kinder sind Textknoten oder HTML-Elemente, die innerhalb des Elements bleiben.

• Optionen für andere Konfigurationen, einschließlich:

  • on: Ereignis-Listener hinzufügen
  • attrs: Attribute des Elements
  • Daten: Daten des Elements

ElementExtended

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

Wo:

• querySelector ist eine Standard-Abfrageauswahlzeichenfolge. Beispielsweise sucht h1 nach der Überschrift h1 , .class__1 sucht nach Elementen mit der Klasse .class__1 .
• isMultiple ist standardmäßig false . Wenn es auf true gesetzt ist, wird ein Array von Elementen zurückgegeben, die mit querySelector übereinstimmen.