element creator

pencipta elemen

Pustaka yang membantu membuat elemen HTML interaktif (dom virtual) dengan mudah. Terinspirasi oleh kerangka MithrilJs.

• Instalasi
• Contoh
• Dokumentasi

Instalasi

elemen-pencipta tersedia di NPM dan sebagai perpustakaan Javascript.

Instal di NPM

 npm install element-creator

Atau sertakan pada file html di unpkg

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

Contoh:

Contoh konten satu halaman terletak di build/index.html . Atau demo singkat di bawah

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

Variabel myDiv di atas menghasilkan elemen div html dengan event click yang mendukung pesan peringatan.

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

Dokumentasi

element-creator berisi Elementexended (atau wrapper) yang membungkus/menambahkan fungsi interaktif seperti .find , .all ke elemen standar dan ElementCreator yang membuat elemen HTML lalu membungkus dan mengembalikan elemen ElementExended.

Pencipta Elemen

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

Di mana:

• elementString adalah string yang menentukan pembuatan parameter elemen dengan pola berikut:

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

(*) adalah opsional

Parameter	Bawaan	Keterangan	Contoh
tipe elemen	div	Tipe elemen atau tipe tag elemen	p atau h1 . Gunakan petikan default yang dibiarkan kosong
elemenId		ID elemen	#firstParagraph
elemenKelas		Kelas elemen	.class__1 atau beberapa kelas .class__1.class_2
elemenAtribut		Atribut elemen	[name=title] atau beberapa atribut [name=title,ref=titleRef]

• anak-anak adalah simpul teks atau elemen html yang tetap berada di dalam elemen.

• pilihan os konfigurasi lainnya termasuk:

  • aktif: tambahkan pendengar acara
  • attrs: atribut elemen
  • data: data elemen

Elemen Diperluas

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

Di mana:

• querySelector adalah string pemilih kueri standar misalnya h1 akan mencari heading h1 , .class__1 akan mencari elemen apa pun yang memiliki kelas .class__1 .
• isMultiple secara default false . Jika disetel ke true ia akan mengembalikan array elemen yang cocok dengan querySelector.