Section 11.5. DOM Builder


11.5. DOM Builder

Defined in builder.js, which is not included in the default Rails skeleton.


Builder.node( elementName[, attributes][, children] )

Creates a DOM element with the tag name elementName. Element attributes can be specified in an optional attributes argument. The optional children argument can be one or more elements to be appended as children of the new node. If children (or one if its elements, if it's an array) is plain text or numeric, it will be automatically appended as a text node.

element = Builder.node('p', {className:'green'},              'Here is a green paragraph.'); document.body.appendChild(element);

That example will create a new paragraph element like this (note that, due to browser inconsistencies, the className attribute should be used to set the CSS class, instead of class):

<p >Here is a green paragraph.</p>

Using children, calls to Buider.node( ) can be nested, as in this example:

element = Builder.node('div', {id:'my_div', className:'box'}, [   Builder.node('div', {style:'font-size:11px'}, [     "text",      1,      Builder.node('ul', [       Builder.node('li', {className:'active', onclick:"alert('hi')"}, 'Item')     ]),   ]), ]); document.body.appendChild(element);

Tables can be created, as well:

$('my_div').appendChild(   Builder.node('table', { width:'100%', border:'1'}, [     Builder.node('tbody', [       Builder.node('tr', {className:'header'}, [         Builder.node('td', [ Builder.node('strong', 'Table Cell')])       ])     ])   ]) );

Note that the TBODY element is required in dynamically created tables.




Ajax on Rails
Ajax on Rails
ISBN: 0596527446
EAN: 2147483647
Year: 2006
Pages: 103
Authors: Scott Raymond

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net