Posted by anthony crumley, Sat May 05 22:46:00 UTC 2007

Pseudo HTML functions generate DHTML for a page. All HTML tags are supported and the functions are simply named after the tag, i.e. a, div, h1, label, li, and ul. In addition, the various input tag types have their own functions, i.e. text, file, checkbox, and radio. The signature for all of them is the same.

tagName([options], [content, ...])

• tagName is the name of the tag or INPUT tag type.
• options is a hash of DHTML properties that are appropriate for the tag. Remember that htmlFor is the property for the LABEL and SCRIPT tag’s FOR attribute. Also, className is the property for the CLASS attribute. Options may also contain some Pseudo specific values that will be explained in subsequent posts.
• content is a string, number, DOM node, array, or function. Array content can contain any of the valid types of content including nested arrays. Functions can return any of the valid types of content including functions.
• return value is always a DOM node.

Examples with HTML equivalent

Node

div()

<div></div>

Node with options

div({id: ‘sample’})

<div id="sample"></div>

Node with string content

div(‘Hello world!’)

<div>Hello world!</div>

Node with options and string content

div({id: ‘sample’, className: ‘salutation’}, ‘Hello world!’)

<div id="sample" class="salutation">Hello world!</div>

Node with node content

div(a({href: ‘http://blog.commonthread.com’}, ‘CommonThread’))

<div><a href="http://blog.commonthread.com">CommonThread</a></div>

Node with array content

ul(people.collect(function(person) {return li(person.name)}))

<ul><li>Anthony</li><li>Ben</li><li>Jason</li></ul>

Node with function content

div(function() {if (true) return ‘Hello!’ else return ‘Goodbye!’});

<div>Hello!</div>

Filed Under: Pseudo | Tags: