I had to build a dynamic form and I liked the "new Element" approach .... so
I hacked together a litte protoype.ext script which allowed it for me...
A very important thing, IMO, is to provide Insertion (bottom, top, before,
after) for dom content (Insertion.* works ony for text)
The script (tested in IE7 & FF2):
----------------------------------------------
var _Element = Element;
Element = function(tag, attributes, childs) {
if(!!attributes &&
(typeof attributes == 'string' || typeof attributes == 'number'
||
attributes.nodeType == 1 || typeof attributes.length !=
'undefined')){
childs = attributes;
attributes = {};
}
var el =
Element.extend(document.createElement(tag)).writeAttributes(attributes
|| {});
if(childs) el.insert(childs);
return el;
};
Object.extend(Element, _Element);
Abstract.Insertion.prototype._initialize =
Abstract.Insertion.prototype.initialize;
Abstract.Insertion.prototype.initialize = function(element, content) {
this.element = $(element);
if(typeof content == 'number') this._initialize(element,
content.toString());
else if(typeof content == 'string') this._initialize(element, content);
else this.insertContent([content].flatten());
};
Element.addMethods({
insert: function(element, child, position) {
var pos = (position || 'bottom').capitalize();
new Insertion[pos](element, child);
return element;
},
injectInto: function(element, destination, position) {
$(destination).insert(element, position);
return element;
},
insertBefore: function(element, newSibling) {
return $(element).insert(newSibling, 'before');
},
insertAfter: function(element, newSibling) {
return $(element).insert(newSibling, 'after');
},
insertTop: function(element, child) {
return $(element).insert(child, 'top');
},
writeAttributes: function(element, attributes) {
element = $(element);
for (var att in attributes)
element[att] = attributes[att];
return element;
}
});
Element.TAGS = "a abbr acronym address applet area b base basefont bdo big
blockquote body " +
"br button caption center cite code col colgroup dd del dfn dir div dl
dt em fieldset " +
"font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img
input ins isindex "+
"kbd label legend li link map menu meta noframes noscript object ol
optgroup option p "+
"param pre q s samp script select small span strike strong style sub
sup table tbody td "+
"textarea tfoot th thead title tr tt u ul var";
Element.create = function(tag, attributes, childs) {
return new Element(tag, attributes, childs);
}
Element.Builder = Class.create();
Object.extend(Element.Builder.prototype,{
initialize: function(tags) {
this.tags = tags || Element.TAGS;
$w(this.tags).each(function(tag) {
this[tag] = Element.create.bind(this, tag);
}.bind(this));
}
});
-------------------------------------------------------
It allows you to do things like:
var x = new Element('div').addClassName('test'); // Creates new div element
and adds a classname
$('myelement').insert(x); // appends the element in "myelement"
$('myelement').insert(new Element('h1'), 'top'); // Invokes Insertion.Top
var html = new Element.Builder();
with(html) {
var node = ul({className: 'test'}, [ li('First'), li('Second'),
li('third')]).hide().injectInto(document.body, 'top');
new Effect.Appear(node);
}
...
brgds, sigi
On 2/6/07, Andrew Dupont <[EMAIL PROTECTED]> wrote:
>
>
> On Feb 6, 3:40 pm, "Martin Ström" <[EMAIL PROTECTED]> wrote:
> > What do you other guys think, are you interested in a patch with test
> > or would it just be a waste of time? :)
>
> Martin, I like your implementation a lot (especially the
> Element.writeAttributes idea, which I think should be added no matter
> what) but it's missing two things I like most about Dan Webb's
> DOMBuilder:
>
> * Tags as method names. Much easier to do x.DIV(foo, bar) than to do
> new Element("div", foo, bar).
> * Easy nesting (like "x.DIV( x.P ( x.SPAN() ) )"). DOMBuilder
> responds differently based on the number and types of arguments
> passed.
>
> I think both these things are critical, or else there's little
> advantage over the native DOM methods. Others may feel differently,
> though.
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype: Core" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-core?hl=en
-~----------~----~----~----~------~----~------~--~---
