How to create a simple jQuery plugin - jQuery Iconify

Andrew Salvadore

Sep. 11, 11 · Web Dev Zone · Interview

Like (0)

Save

3.10K Views

I've been playing with jQuery in the last few days and I'm pretty impressed with the power of this library.
I still remember few years ago when you had to do everything on the server side just because it was easier!

Those days are gone.

Beacuse the best way to learn is to get your hands dirty I'm gonna show you how to create a simple plugin that I called 'iconify'.

It is very simple and you can apply the same idea to create some custom plugins as well.
Essentially all the plugin does is takes an element on the page and wraps it into a div. Then put an icon next to it either left or right depending on some options.

Through options you can also bind some events to the icon (like click, or double click).

Let's see how is done.

Basic jQuery plugin

jQuery plugins have the following structure.

(function($){
//
// Plugin definition goes here
//
})(jQuery);

Essentially you are creating a function running it and passing this function the jQuery object.

You need to use this definition to make sure the $ function is the jQuery one.

By passing jQuery to a function that defines the parameter as $, $ is guaranteed to reference jQuery within the body of the function.

Let user override defaults with $.extend

Now I'm going to use the $.extend() utility function to merge user options with default options.

Also we guard against an options object that’s null or undefined with ||{}, which supplies an empty object if options evaluates to false (null and undefined do).

	
var settings = $.extend({
   image: imagesPath + "/info_icon.png",
   activation: "hover"
   },options||{});

Now work on the matched nodes

As we are building a jQuery plugin you will use the standard jQuery selectors to identify the nodes you want to work on. So the way we'll be calling this plugin is

$('.myCssClass').iconify('myImage.png');

This code will apply our icon to all the elements that have .myCssClass.
To do that in the plugin you will have to loop on this elements using the each function.

return this.each(function(){
 
// here goes the code that will be manipulation all matched nodes.
 
});

The complete plugin code will look like this

I've added a couple of utility functions in there to copy the style from the matching element to the wrapper div. The rest is simply adding the icon and binding the event.

/**
 * Add an icon to an element on the page
 * @param hash options:
 *  image  : String  -> The path to the icon image to use. Either this or cssClass must be defined
 *  cssClass : String  -> The cssClass to use. It assumes the image used as background for the class
 *  iconCss  : Hash  -> Additional css styling for the icon
 *  position : String -> Where you want to see the icon. Options are right, left. Default right
 *  bind  : Hash  -> event: the event to bind to, callback: the callback function for the event
 *
 */
(function($) {
 $.fn.iconify= function(options) {
  var settings = $.extend({
   image    : "n/a",
   cssClass   : "n/a",
   iconCss    : {},
   copyStyle   : true,
   position   : "right", /*right, left*/
   bind    : {event:'click', callback: function() {}}
   },options||{}
  );
   
  var copyStyle = function (element, icon, wrapper){
   elementWidth = element.outerWidth(true);
   elementHeight = element.outerHeight(true);
    
   iconWidth = icon.outerWidth(true);
   iconHeight = icon.outerHeight(true);
    
 
   wrapper.attr('style', element.attr('style'));
   element.css("margin","0");
   element.attr('style','display:inline')
    
   //should pick the max height
   wrapper.width(elementWidth + iconWidth);
   wrapper.height(elementHeight);
 
    
   allClasses = getClassNames(element);
   $.each(allClasses, function(n, value){
    wrapper.toggleClass(value);
    element.removeClass(value);
   });
  }
   
   
  var getClassNames = function(element) {
   if (name = element.attr("class")) {
    return name.split(" ");
   }else {
    return [];
   }
  }
 
  return this.each(function(){
   var self = $(this);
   var wrapper = self.wrap($('<div></div>')).parent();
   var icon = null;
    
    
 
   // css class or image?
   if (settings.cssClass){
    icon = $("<span> </span>").attr("class",settings.cssClass);
   } else if (settings.image){
    icon = $("<img>").attr("src",settings.image);
   }
  
    
   // position left or right?
   if (settings.position && settings.position.length > 0){
    var strPosLength = settings.position.length;
    if (settings.position.substring(strPosLength - 5, strPosLength) == 'right'){
     icon.insertAfter(this);
    }else {
     icon.insertBefore(this);
    }
   }
    
   //copies the element style to the wrapper
   copyStyle(self, icon, wrapper);
    
   // binds event to callback
   icon.bind(settings.bind.event, settings.bind.callback);
   icon.css(settings.iconCss);
  });
 
   
 };
})(jQuery);

Thanks for reading!

From http://www.devinprogress.info/2011/05/how-to-create-simple-jquery-plugin.html

Topics:

Opinions expressed by DZone contributors are their own.

Comments

How to create a simple jQuery plugin - jQuery Iconify

Basic jQuery plugin

Let user override defaults with $.extend

Now work on the matched nodes

The complete plugin code will look like this

Popular on DZone

Web Dev Partner Resources