How to design this code?

I want to write a JavaScript function that effectively "widgetizes" a section of the DOM that contains other widgets. For the most part these widgets represent some sort of input from the user. In particular, text boxes, selects, and other Widgets. I've kind of done it, but there are a few niggles, some of which are rather philosophical. In the spirit of the interwebs, I'd like some input.

Here is the code so far. Still needs onchange support, and...
  1. How should the application programmer select the composite node? Passing an ID as a string is easy, but not very flexible. I'd rather accept an arbitrary DOM elt. A jQuery programmer is going to want a plugin, which means using an arbitrary selector. [Update: Resig recently posted a bit of code that had to deal with this exact issue. He accepts both. It remains to be seen what this means to make this into a plugin.]
  2. How should I determine if focus is trapped "inside" the composite? Currently I'm tagging all descendant elts with a unique tagging class, but I find this modification of the DOM distasteful. Am I being too picky - does it really matter if elements have an extra class? Is there a way, with jQuery or with basic JavaScript, to ask if a particular elt is an ancestor of another elt? One interesting possibility is to use the "offsetParent" property - apparently divs become offsetParent by default, although this approach might fail under certain layout circumstances.

No comments: