grab bag - assorted jQuery plugins

DOM Builder

This plugin defines the double-dollar function which can be used to create DOM node hierarchies, set attributes, hook up event handlers and return the resulting structure as a jQuery object. Probably best illustrated with some code:

$$('tr', $$('th.col-1', 'ID'), $$('th.col-2', 'Username'), $$('th.col-3', 'Email')),
$$('tr', $$('td', 1), $$('td', 'jaz303'), $$('td', '')),
{ style: "margin:20px auto",
hover: [
function() { $(this).css('backgroundColor', '#efefef'); },
function() { $(this).css('backgroundColor', '#cdcdcd'); }

And here's the resulting table (it's auto-generated, trust me):

It's also possible to use shortcut methods for each tag although by using these you forgo the ability to neatly specify IDs/classes:

TR( TH('This is'), TH('another table') ),
TR( TD('generated using'), TD('shortcut methods') ),
{style: "margin:20px auto"}

The general form of each call to $$() is:

$$(nodeName, content1, content2 ... contentN, options);

This will create a node with the given nodeName, apply to it the given options (if any) and then append the content, each of which may be a string, jQuery object or DOM element. Options are objects of key-value pairs; function values will be bound to the event denoted by the key, otherwise the corresponding attribute will be set. The hover option is special; when set to an array, it is assumed to contain two functions to handle hover in/out events on the element.

Direct Link