ebi.js - Element Builder ライブラリ

Element作成に特化したJavaScriptライブラリです。

メソッドチェーンでHTML Element(要素)を組み立てていきます。

JavaScript

Ebi.createElement('#target1')
  .start('p')
    .append('This is a ')
    .start('span')
      .style({
        color: 'red',
        fontWeight: 'bold'
      })
      .append('pen')
    .end()
    .append('.')
  .end()

上記で作られるHTML

<div id="target1">
  <p>This is a<span style="color: red; font-weight: bold;">pen</span>.</p>
</div>

ソース

ebi.js

GitHubにてコードを管理しています。

onozaty/ebi.js ・ GitHub

使い方

準備

ebi.jsを読み込みます

<script type="text/javascript" src="./ebi.js"></script>

Ebi.createElement

Ebi.createElementメソッドによって、Elementをラップしたオブジェクト(以降ebiオブジェクトと呼びます)が返却されます。

// 指定されたElementのラッパーオブジェクトを生成
var element = Ebi.createElement(document.getElementById('target1'));

// "#"から始まる文字の場合、#以降をidとみなして
var element = Ebi.createElement('#target1');

// "#"から始まらない文字の場合タグとみなして
var element = Ebi.createElement('div');

append

ebiオブジェクトのappendメソッドによって、Element配下に要素を追加します。

Ebi.createElement('#target1')
    // テキスト(TextNode)を追加
    .append('テキスト')
    // ebiオブジェクトを追加(ebiオブジェクトが内包しているElementが追加される)
    .append(Ebi.createElement('div'))
    // Elementを追加
    .append(document.createElement('br'))
    // 追加したいものを配列として指定(appendを繰り返し呼んだ場合と同じ)
    .append(['text2', document.createElement('br'), 'text3']);

clear

ebiオブジェクトのclearメソッドによって、配下の要素をすべて消します。

Ebi.createElement('#target1').clear();

property

ebiオブジェクトのpropertyメソッドによって、Elementのプロパティを設定します。

Ebi.createElement('#target1')
    // プロパティ名と値で指定(第1引数がプロパティ名、第2引数が値)
    .property('className', 'class1')
    // オブジェクトで指定(そのままプロパティがコピーされる)
    .property({
      type: 'button',
      value: 'click'
    });

style

ebiオブジェクトのstyleメソッドによって、Elementのstyleを設定します。

Ebi.createElement('#target1')
    // style名と値で指定(第1引数がプロパティ名、第2引数が値)
    .style('height', '100px')
    // オブジェクトで指定(そのままプロパティがコピーされる)
    .style({
      color: 'red',
      fontWeight: 'bold'
    });

event

ebiオブジェクトのeventメソッドによって、Elementのイベントハンドラを設定します。

Ebi.createElement('#target1')
    // 第1引数がイベント名、第2引数が関数
    .event(
      'click',
      function() { alert('click!!') }
    )

start/end

ebiオブジェクトのstartメソッドによって、指定Tagの作成を開始します。

startメソッドを呼び出したあとendメソッドが呼び出されるまで、コンテキストはstartメソッドで作成されたTagになります。

Ebi.createElement('#target1')
    .start('span')
      .append('red') // span要素に対する指定
      .style({
        color: 'red',
        fontWeight: 'bold'
      })
    .end();

ライセンス

MITライセンスとします。

商用・非商用に関わらず無償で利用することができます。著作権表記とライセンス表記さえ行えば、再配布、再利用に制約はありません。

原文はこちら：MIT-LICENSE.txt

その他

お問い合わせ、コメント等は下記Blogまたは、Contact からお願いします。

ebi.jsの紹介ページを作りました

ebi.js Element Builder ライブラリ