builder.
prototype.
機能の紹介
DOMを構築するときは,
var elt = document.createElement('button');
elt.setAttribute('id','hoge');
elt.onclick=doSomething
elt.appendChild(document.createTextNode('hello button'));
builder.
Builder.node('button',{id:'hoge',onclick:'doSomething()'},'hello button');
さらに便利なのは,
Builder.node('div',[
Builder.node('a',{href:'./foo.png'},
Builder.node('img',{src:'./foo.png'})),
Builder.node('a',{href:'./bar.png'},
Builder.node('img',{src:'./bar.png'}))]);
入れ子にした結果はこのようになります。
<div>
<a href="./foo.png">
<img src="./foo.png"/>
</a>
<a href="./bar.png">
<img src="./bar.png"/>
</a>
</div>
便利な機能 Builder. dump()
私がBuilder.
DIV([
A({href:'./foo.png'},
IMG({src:'./foo.png'})),
A({href:'./bar.png'},
IMG({src:'./bar.png'}))])
このショートカットモードともいうべき機能は,
Builder. node関数の使いかた
Builder.
- Builder.
node( 要素名 ) - Builder.
node( 要素名, 属性 ) - Builder.
node( 要素名, 入れ子 ) - Builder.
node( 要素名, 属性, 入れ子 )
要素名は,
属性は,
入れ子は,
この入れ子の中の配列は次のように扱われます。
Builder.node('p','foobar1']) ==
Builder.node('p',['foo','bar',1]) ==
Builder.node('p',['foo',['bar',1]]) ==
<p>foobar1</p>
このライブラリは,
DIV(['foo','bar','foobar'].map(function(x,i){
return BUTTON({onclick:"alert('" + x + i + "')"},x)}));
Builder
それでは,
0001: // script.aculo.us builder.js v1.8.1, Thu Jan 03 22:07:12 -0500 2008
0002:
0003: // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
0004: //
0005: // script.aculo.us is freely distributable under the terms of an MIT-style license.
0006: // For details, see the script.aculo.us web site: http://script.aculo.us/
0007:
1~7行目は著作権表示です。