Antelope Love Fan

One of the great things about jQuery is that it’s very easy to extend and has a great plugin ecosystem.

Today, we’re going to create a very simple jQuery plugin which will change the border color of an element.

Step 1: Protect the global scope

The first thing to do is wrap your plugin code in an anonymous function that calls itself so we don’t pollute the global scope.

(function($) {

})(jQuery);

Now any variables we declare inside that function will only exist within the local scope.

We also pass the main jQuery object to our function. This allows us to use the $ object even when jQuery is running in noConflict mode.

Step 2: Create our plugin function and make sure it’s chainable

We going to add a function called borderize to the jQuery object.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
        });
    };
})(jQuery);

The return this.each(); is important because it allows our plugin to be chainable by returning the object the function is being called on.

That means we’ll be able to do things like this:

$(‘#Foo’).borderize().css(‘width’, ’500px’);

Step 3: Setup some default options for the plugin but allow the end-user to change them.

We set our default border color to red. If borderize() is called without any arguments, the border color will still be red.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
            var settings = {
                borderColor: '#00ff00'
            };

            if(typeof opts == 'object') {
              $.extend(settings, opts);
            }
        });
    };
})(jQuery);

We use the $.extend function to update our settings object with any options the user might pass in.

$('#Foo').borderize( { borderColor: '#000' } );

In the above, we’re passing in black for the border color. $.extend will overwrite the value of borderColor in settings with the value passed in via opts

Step 4: Make the plugin actually do something

Now that the scaffold of our plugin, we add a call to $.css to actually change the border color of the passed in object.

(function($) {
    $.fn.borderize = function(opts) {
        return this.each( function() {
            var settings = {
                borderColor: '#00ff00'
            };

            if(typeof opts == 'object') {
              $.extend(settings, opts);
            }

            $(this).css('border', '1px solid ' + settings.borderColor);
        });
    };
})(jQuery);

Step 5: A final demo

Here’s a working jsfiddle demo

Here’s a short list of the Chrome extensions that I use all day, every day.

MeasureIt!

Web Developer

HTML Validator

Google Analytics Debugger

And let’s also not forget the Chrome Developer Tools that are built into Chrome. Once you turn on XMLHttpRequest logging, it can do everything Firebug does.

I occasionally run into a scenario where I have to run jQuery and PrototypeJS on the same site.

Usually this is because it’s an older site that was original written using Prototype and we’re migrating it over to jQuery. Or other times it’s just easier to use an existing jQuery plugin for something than to write a few dozen lines of Prototype from scratch.

It’s easy to run jQuery in parallel with other libraries thanks to jQuery’s noConflict mode which makes jQuery stop using the $ variable.

“But”, you say, “Having to type jQuery.whatever() over and over is so hard compared to typing $.whatever().”

Well, my friend, today is your lucky day. I have a solution for you that will save you characters of typing. Characters!

If all of your code is happening inside of a jQuery.ready() event, you can do this:

  jQuery(document).ready( function($) {
    $('a’).css('border’, '1px solid red’);
  });

In the example above, jQuery is passing itself to the ready() function handler. That means any code instead the ready handler can use $ to access the jQuery object.

And if your jQuery code isn’t inside a ready() event? Still easy to handle:

(function($) {
  function makeAllLinksRed() {
    $('a’).css('border’, '1px solid red’);
  }
})(jQuery);

In this case, we wrap all of our code in an anonymous function that calls itself, passing in the jQuery object as a single parameter. Now all of the code inside the anonymous function can use $ to access the jQuery object.