I want to take an existing DOM object and extend it with some
functionality.  I know there's a way to do this with prototype.
Unfortunately, I'm not entirely sure how to do this.

Basically, I want to take an existing DOM object and turn it into a
'widget' by adding some functionality.

say we have a span:
<span id="blah">some text here</span>

I want to be able to, in javascript, do something like this:

var whatever = new ActiveSpan("blah");

and have the ActiveSpan class extend it with some functionality (like
onclick events, attributes, etc)

here's what I have in mind, but I'm not sure this is exactly correct:

var ActiveSpan = Class.create();
ActiveSpan.prototype = {
        initalize: function(span) {
                Object.extend(span, this);
                this.registerCallbacks();
        },
        registerCallbackss: function() {
                Event.observe(this, 'click', 
clickHandler.bindAsEventListener(this);
        },
        clickHandler: function(e) {
                this.style.background = "red";
        }
}

does this look right?  Also, I'll eventually want to go through the
child elements in the initalize method to set those children up as well.
 The overall goal of this is to create an enhanced table class where you
just call a function and it does all sorts of things like handling
mouseovers, mouseouts, zebra striping, etc.

If I'm completely wrong, and someone has an example they can point me
at, that would be great!  If this looks ok, though, I'll continue on
with it :)

If this is not possible, or if I have to attach my code to the object
like: span.BLAH = new ActiveSpan .. let me know :)  I just want to do
this in an as prototype-like way as possible.

-Jeremy

Attachment: signature.asc
Description: OpenPGP digital signature

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Reply via email to