element creator

要素作成者

インタラクティブな HTML 要素 (仮想 dom) を簡単に作成するのに役立つライブラリ。 MithrilJs フレームワークからインスピレーションを受けています。

• インストール
• 例
• ドキュメント

インストール

element-creator は、NPM 上で Javascript ライブラリとして利用できます。

NPM にインストールする

 npm install element-creator

または、unpkg の HTML ファイルにインクルードします

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

例:

1 ページのコンテンツの例は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 、アラート メッセージをプロップするclickイベントを含むdiv html 要素を生成します。

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

ドキュメント

element-creator には、 .find 、 .allなどの対話型関数を標準要素にラップ/追加するElementextended (またはラッパー) と、HTML 要素を作成して ElementExtended 要素をラップして返すElementCreatorが含まれています。

エレメントクリエーター

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

どこ：

• elementString は、次のパターンで要素パラメータの作成を指定する文字列です。

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

(*) はオプションです

パラメータ	デフォルト	説明	例
要素タイプ	ディビジョン	要素のタイプまたは要素のタグのタイプ	pまたはh1 。空のままにした場合はデフォルトを使用する
要素ID		要素のID	#firstParagraph
要素クラス		要素クラス	.class__1または複数のクラス.class__1.class_2
要素の属性		要素の属性	[name=title]または複数の属性[name=title,ref=titleRef]

• Children は、要素内にあるテキスト ノードまたは HTML 要素です。

• オプションos のその他の構成:

  • on: イベントリスナーを追加します
  • 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 と一致する要素の配列が返されます。