How can I design a custom control in Javascript (possibly using jQuery)

Posted by Mathieu Pagé on Stack Overflow See other posts from Stack Overflow or by Mathieu Pagé
Published on 2010-06-02T03:48:07Z Indexed on 2010/06/02 3:53 UTC
Read the original article Hit count: 192

Filed under:
|

I'd like to create a custom control in javascript. The goal is to create a building block that has methods, properties and events and render into a div.

An example of one such control would be a calendar. It would render into a div, it would have properties that would define how it's displayed and what date is selected or highlighted, it would have methods to change the current month or to select some date and it would raise events when a day is clicked or the current month is changed by a user input.

I can think of lots of way to implement this and I'm not sure what is the best way. I seem to remember that it's a bad thing to augment a DOM elements with properties and method, so I ruled that out. A jQuery plugin seems like a good idea, however I'm not sure if it's appropriate to create a plugin for each and every method my control would have so I could then use it like :

$('#control').method1();
$('#control').method2();

And if I do use jQuery, where do I store the private data of my control?

Another idea I got was to create a new kind of object that would have a reference to a div in which it could render it's elements.

So what is the prefered way to do this. If I can I would like to do this as a jQuery plugin, but I'd need guidlines on how to create methods and where to store private data. I've loked at Plugins/Authoring on jQuery website and it did not helped that much in this regard.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery