Here is a quick how to on making your own jQuery plugin. Extending jQuery with plugins and methods is very powerful and can save you and your peers a lot of development time by abstracting your most clever functions into plugins.
In this HowTo we are going to make a hello world tooltip plugin. This tutorial takes 15 minutes to be read. Let's see how we can do it.
To write a plugin you have to extend jQuery.fn object.
Now we can start writing our awesome plugin. Before starting remember in the immediate scope of the plugin function, the this keyword refers to the jQuery object the plugin was invoked on. This is a common slip up due to the fact that in other instances where jQuery accepts a callback, the this keyword refers to the native DOM element. Therefore there is no need to wrap the this keyword (again) in the jQuery function.
The beauty of jQuery's design and is one of the reasons jQuery
is so popular is it's chainability. So to maintain chainability in a plugin, you must make
sure your plugin returns the
Let's code our first version of the Hello Worl Plugin.
Now if you save it at helloplugin.js and make an html page as below you can test and see how it works.
You should make your plugin flexible enough so other users will be able to customise it. You usually define some default value for each option parameter and if users need they can overwrite it when calling function. In this case we want to make the tooltip structure and text customisable.
In our next post we will show you how to make your plugins more flexible and how to extend them with methods.
jQuery Template Engine (jTemplate) is flexible and smart. Just by adding some extra directives it can merge all sort of data st...
There are hips of jQuery validation Engines out there. But still some cannot be flexible enough to cover all developers need. S...
This easy to use jQuery watermark plugin which adds watermark input and textarea elements. A watermark is lighter colored text ...
jQuery Editable (Inline Editor) WarLike all other things on the web there is kind of war between geek working on same topic. Sp...