Back to the bloging world after a while, I’ll start by writing about jQuery plugins, a subject that even though is pretty straight forward, I think not many people dare to tackle.
I’m not a particular fan of the jQuery library, but I’m not a hater either. Hey, it’s not the silver bullet for all my JS problems, but it has been a savior several times in the past.

I’ll go over the basics of creating a new plugin going over the code of a plugin I wrote myself in order to understand the process a bit better: FieldSplitter.

What we’re going to achieve with the plugin is the ability to grab an already existing field on a form and split it into several smaller fields, that are interconnected (jumping from one to the next is done automatically). The other beauty of the plugin, is that even though you’re adding extra fields, you’ll still be sending the original field as part of the submit data, so if you already have the form implemented, adding the plugin and using it should have no effect on your back-end code.

How are we going to use it?

Before writing the code, I like to think of how the public interface for the plugin will be, this way, I can start going into the plugin deeper and deeper.

Here is my idea for this plugin’s public interface:

$(".date-field").fieldSplit({
    glue:"/", 
    maxLength:2, 
    numberOfFields:3, 
    defaultValue:"__"
});

The basic skeleton

There are two basic ways of adding methods to the jQuery arsenal. Lets check them out real quick:

$.myCustomMethod = function(param) {
    //Do some stuff with code
};

$.fn.myCustomMethod = function() {
  return this.each(function(idx, elem) {
      //Do some stuff to each element selected
  });
};

What’s the difference? Well, the main difference, is how you’ll use them: on the first example, you would use it like so:

$.myCustomMethod(“my param”);

That’s it, you’re not working directly on any element, you’re using the jQuery object as a namespace (if you will).

On the second example, the way to use the method, would be:

$(“my css selector”).myCustomMethod();

And there you have it, now you’re actually working with the elements matched by the selector. For our case, we’ll go with the second example.

Ok, lets get our hands dirty

For what I’ve read there are a couple of lines of code, that every plugin should have:

(function($) {
    $.fn.fieldSplit = function(options) {
             };
 })(jQuery);

In here we’re enclosing the entire code of the plugin into an anonymous function that receives the jQuery object as a parameter. That way, we make sure that the $ symbol will not collide with any other library.

After that, we’re accessing the fn attribute, which holds all the methods that are added to the DOM elements matched by the selectors we use.
The options parameter will be the hash we pass to the method when we use it. It’ll contain the configuration parameters that we’ll want to use.

Now, the next logical thing would be to grab each of the elements matched by our selector (there could be several) and apply our transformation to each one.
To do this, we need to know that inside our method, the this keyword will contain the list of elements matched. So we can do something like:

return this.each(function(i, elem){
  //Code for each element goes here
});

So, going back to the previous block, our jQuery plugin skeleton would look like this:

(function($) {
    $.fn.fieldSplit = function(options) {
             //Do some work with the options
             return this.each(function(i, elem){
                //Code for each element goes here
            });            
            //Helper functions could go here if you like
        };
 })(jQuery);

And that’s it, the rest of the code is specific to the plugin and not really generic, so if you want to see the full code, check it out here.

Hope it helps!

Happy coding!