element creator

создатель элемента

Библиотека, которая помогает легко создавать интерактивные элементы HTML (виртуальный dom). Вдохновлен фреймворком MithrilJ.

• Установка
• Примеры
• Документация

Установка

element-creator доступен в NPM и в виде библиотеки Javascript.

Установить на НПМ

 npm install element-creator

Или включите html-файл в unpkg.

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

Примеры:

Пример одностраничного контента, расположенный по адресу build/index.html . Или быстрая демонстрация ниже

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

Переменная myDiv указанная выше, генерирует HTML-элемент div с событием click , который поддерживает предупреждающее сообщение.

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

Документация

element-creator содержит Elementextended (или оболочку), который оборачивает/добавляет интерактивные функции, такие как .find , .all, к стандартному элементу и ElementCreator , который создает элементы HTML, затем переносит и возвращает элемент ElementExtended.

ElementCreator

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

Где:

• elementString — это строка, определяющая создание параметров элемента по следующему шаблону:

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

(*) не является обязательным

Параметры	По умолчанию	Описание	Пример
элементТип	делитель	Тип элемента или тип тега элемента	p или h1 . Использовать значение по умолчанию, если оставить пустым
идентификатор элемента		Идентификатор элемента	#firstParagraph
классы элементов		Классы элементов	.class__1 или несколько классов .class__1.class_2
элементАтрибуты		Атрибуты элемента	[name=title] или несколько атрибутов [name=title,ref=titleRef]

• Children — это текстовый узел или элементы HTML, которые остаются внутри элемента.

• опции или другая конфигурация, включая:

  • вкл.: добавить прослушиватель событий
  • attrs: атрибуты элемента
  • данные: данные элемента

ЭлементРасширенный

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

Где:

• querySelector — это стандартная строка селектора запроса, например, h1 будет искать заголовок h1 , .class__1 будет искать любой элемент, имеющий класс .class__1 .
• isMultiple по умолчанию имеет false . Если установлено значение true он вернет массив элементов, совпадающих с querySelector.