For all you jQuery lovers out there I will try to show you how you can create your own jQuery plugins, so you can start developing new and interesting stuff for all the jQuery community.

To create a jQuery plugin, and have it integrated in the jQuery object, we have to attach a function to the jQuery prototype.The prototype property in JavaScript can be used to extend any object with new methods or properties.

Before adding you plugin your function you must wrap it, by creating a private scope for jQuery, like this:

  1. (function($) {
  2. //Your code
  3. })(jQuery);

Now let’s say you want to create a jQuery plugin with the name “test”. You must add your “test” method to the jQuery object by attaching it to $.fn (which is an alias for the prototype property of the jQuery object “jQuery.fn = jQuery.prototype“). So this is how your plugin should look until now:

  1. (function($) {
  2. $.fn.test = function() {
  3. // Your code
  4. }
  5. })(jQuery);

Now you can call the $(“a”).test(). Next we should go thru all the elements sent to us by the jQuery selector by using .each() method and then return a jQuery object so that chaining¬†to be possible:

  1. (function($) {
  2. $.fn.test = function() {
  3. return this.each(function(){
  4. //Your code – here we can do modification to the current element by using $(this)
  5. });
  6. }
  7. })(jQuery);

Now we have our simple jQuery plugin…so let’s complicate things a little…let’s add a callback function. So let’s say that you use in your plugin some fadeIn or other methods that require time to end..so a callback should be in order, this is how it should be added:

  1. (function($) {
  2. $.fn.test = function(callback) {
  3. return this.each(function(){
  4. $(this).fadeIn(function(){
  5. if (callback) callback();
  6. })
  7. });
  8. }
  9. })(jQuery);

Parameters and be easily sent back with the callback by calling the method like this: callback(parameters).

An interesting method from jQuery is: <strong>$.isFunction(param)</strong>. This function can be used to verify if the parameter sent to your plugin is a function or a variable, this is useful for having flexible plugins that can be called differently depending on the users needs: $(‘a’).test(‘option’) or $(‘a’).test(function(){//code}). So instead of the above example we would have:

  1. (function($) {
  2. $.fn.test = function(callback) {
  3. return this.each(function(){
  4. $(this).fadeIn(function(){
  5. if ($.isFunction(callback)) callback();
  6. })
  7. });
  8. }
  9. })(jQuery);

Now we have a really good plugin, but before we end there is one more thing that we should add, extend options. A jQuery plugin must have a lot of flexibility, so the values used in our plugin (like colors,height,etc..) should be easy to change. This can be done by using $.extend() method:

  1. (function($) {
  2. $.fn.test = function(param) {
  3. $.fn.test.defaults={
  4. 'duration' : 'fast'
  5. };
  6. options = $.extend($.fn.highlightOnce.defaults, param);
  7. return this.each(function(){
  8. $(this).fadeIn(options.duration,function(){
  9. if ($.isFunction(param)) param();
  10. })
  11. });
  12. }
  13. })(jQuery);

Now we can call our plugin with different options or with a callback :

  1. $('a').test({'duration':'slow'});
  1. $('a').test(function(){alert('Test');});