Nice one, Rod. That code is LISPtastic!
On May 7, 2:53 am, Rod <[EMAIL PROTECTED]> wrote:
> I really like what Dan Webb has done in LowPro (http://www.danwebb.net/
> lowpro) for making DOM building easier. His site isn't responding just
> at the moment so I can't grab his exact code, but since I still prefer
> scripty's Builder.node() I have this in my extensions that achieves
> the same result:
>
> ("p|div|span|strong|em|img|table|tr|td|th|thead|tbody|tfoot|pre|
> code|" +
>
> "h1|h2|h3|h4|h5|h6|ul|ol|li|form|input|textarea|legend|fieldset|"
> +
>
> "select|option|blockquote|cite|br|hr|dd|dl|dt|address|a|button|abbr|
> acronym|" +
>
> "script|link|style|bdo|ins|del|object|param|col|colgroup|optgroup|
> caption|" +
> "label|dfn|kbd|samp|var").split("|").each(
> function(el) {
> window['$' + el] = function() {
> return
> Element.extend(Builder.node.apply(Builder,
> [el].concat(Array.prototype.slice.apply(arguments))));
> };
> });
>
> And you end up with a $-prefixed function for each different type of
> element, so you could do your above table something like this:
>
> var table = $table({ id: 'myTable' }, {
> $thead({
> $tr({ $th('Title A'), $th('Title B') })
> }),
> $tbody({
> $tr({ $td('Cell A'), $td('Cell B') })
> })
>
> });
>
> Which I reckon makes it pretty readable. And with Builder.node()'s
> flexibility with arguments you end up with a pretty powerful DOM
> builder that requires a small amount of code and is easy to maintain.
> That is of course if you're comfortable cluttering up the global
> namespace with all these extra functions.
>
> (btw, if you're going to use the above then you need to make sure it
> is executed only after scripty's builder.js is loaded, so if you're
> loading it the normal way you might need to do it after a dom:loaded
> event).
> -- Rod
>
> On May 7, 7:27 am, "Erik R." <[EMAIL PROTECTED]> wrote:
>
> > Recently I've been using prototype's wonderful new DOM creation
> > syntax. But I found that it's still too verbose. Say I want to
> > create the following table:
>
> > <table id="myTable">
> > <thead>
> > <tr>
> > <th>Title A</th>
> > <th>Title B</th>
> > </tr>
> > </thead>
> > <tbody>
> > <tr>
> > <td>A</td>
> > <td>B</td>
> > </tr>
> > </tbody>
> > </table>
>
> > Simple, right? But, as I understand the prototype.js DOM building, to
> > build this table, I'd have to do:
>
> > var table = new Element('table', {id:myTable});
> > var thead = new Element('thead');
> > table.appendChild(thead);
> > var theadRow = new Element('tr');
> > thead.appendChild(theadRow);
> > theadRow.appendChild(new Element('th').update('Title A'));
> > theadRow.appendChild(new Element('th').update('Title B'));
> > var tbody = new Element('tbody');
> > table.appendChild(tbody);
> > var tbodyRow = new Element('tr');
> > tbody.appendChild(tbodyRow);
> > tbodyRow.appendChild(new Element('td').update('A'));
> > tbodyRow.appendChild(new Element('td').update('B'));
>
> > Grossly verbose, I think you'll agree. Particularly, it's the saving
> > of the local variables that bothers me.
>
> > But what if we had a shortcut function? Just like $() is short for
> > document.getElementById(), I think we could benefit from a shortcut
> > element function. So I've written one: $E.
>
> > var $E = function(tagName, attributes, childrenVarArgs)
> > {
> > var element = new Element(tagName, attributes);
> > $A(arguments).flatten().each(function(child, i)
> > {
> > if (i > 1 && child)
> > element.appendChild(child);
> > });
> > return element;
>
> > };
>
> > It takes the tagName and attributes just like the Element constructor,
> > but it will also take other arguments that will be appended as
> > children. Look at the new code to create that same table:
>
> > var table = $E('table', {id:myTable},
> > $E('thead', null,
> > $E('tr', null,
> > $E('th').update('Title A'),
> > $E('th').update('Title B'))),
> > $E('tbody', null,
> > $E('tr', null,
> > $E('td').update('Title A'),
> > $E('td').update('Title B'))));
>
> > A little nicer, don't you think? Some intelligent argument parsing
> > might also be added to get rid of those null attribute parameters.
>
> > Anyway, I'm submitting this as a suggestion to be incorporated into
> > the next release of prototype.js. Let me know what you think.
>
> > Cheers,
> > Erik
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to rubyonrails-spinoffs@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
