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

Question

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.

Answer 1

When writing Jquery plugins, you usually expose methods via optional arguments to the plugin function

For example:

$("#id").myplugin( 'method1' );

Storing data is fairly simple. Just decide if you want to persist that data in the DOM, or in memory. If the latter, you need to create an object which your plugin can access.

(function($) {

    var data;
    $.fn.extend({

        myplugin: function(args) {
            if (args === 'init') {
                data = {};
                data.prop1 = val;
            }
            if (args === 'method1')
                alert(data.prop1);         
        }

    });

})(JQuery);

If you want to persist the data in the DOM, you would add an attribute(s) to your container div with the data you wish to persist.

(function($) {

    $.fn.extend({

        myplugin: function(args) {
            if (args === 'init') {
                $(this).attr('data') = val;
            }
            if (args === 'method1')
                alert($(this).attr('data'));
        }

    });

})(JQuery);

Answer 2

1. you can start by reading this, a simple JQuery plugin tutorial
2. you can also get lots of idea on this site, a tutorial on jQuery UI widgets.

As a starting point, the first site offers this snippet as a skeleton for plugin development:

//You need an anonymous function to wrap around your function to avoid conflict
(function($){

  //Attach this new method to jQuery
  $.fn.extend({ 

    //This is where you write your plugin's name
    pluginname: function() {

        //Iterate over the current set of matched elements
        return this.each(function() {
            //code to be inserted here
        });
    }
  });

//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);