How to create a simple jQuery plugin - jQuery Iconify
Join the DZone community and get the full member experience.
Join For FreeI'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.
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).
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
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.
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.
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.
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
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.
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.
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