On Sep 26, 9:54 am, Rumith <[EMAIL PROTECTED]> wrote:
> Hi,
> I'm trying to implement a method that would allow to use
> Class.create() inheriting HTML elements like div instead of other
> classes. That is, the result would be something like this (the syntax
> is arbitrary and is for demo purposes only):
>
> var Block = Class.create("div", {
> initialize: function(bgColor) {
> this.style.backgroundColor = bgColor;
> },
>
> highlight: function() {
> ....
> },
>
> });
>
> var block = new Block("#aaaaff");
> document.getElementById("mountPoint").appendChild(block);
> block.highlight();
>
> The purpose is to defeat the necessity to maintain two JS objects (the
> actual DOM element and the object containing the special methods and
> the DOM element) per entity.
> Has anybody tried something like this? Can it be done without
> modifying Prototype itself? Thanks.
A wrapper/decorator pattern would probably be the best option:
var DOMElement = Class.create({
initialize: function(tagName, options) {
this.__element = new Element(tagName || 'div', options);
},
// invoked when passed to `insert`
toElement: function() {
return this.__element;
},
setStyle: function(style) {
this.__element.setStyle(style);
return this;
}
});
var Block = Class.create(DOMElement, {
initialize: function($super, bgColor) {
// call superclass, create element
$super('div');
this.setStyle('backgroundColor', bgColor);
},
// add custom methods to a subclass
highlight: function() {
this.__element.highlight();
}
});
var block = new Block("#aaaaff");
$(document.body).insert(block);
block.highlight();
--
kangax
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" 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-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
