Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Create a jQuery plugin

Thursday, September 23rd, 2010 by Servage

One of the easy ways to quickly create cool stuff in Javascript is by using jQuery. I wrote about it in an earlier article, and will now add an introduction about creating own jQuery plugins. Why? Often developers create elements that they wish to re-use in the same, or across several projects. Creating a jQuery plugin makes it really simple to do that, and still maintain a code-base for that particular function. So you don’t have to copy&paste code between different files, and can develop the plugin as a stand-alone feature. I think that’s very convenient. And it even makes it possible for you to share you nifty functionality with others, if you want.

The jQuery documentation is a great way to get started with the general use of jQuery, and they also have a very good introduction how to create a plugin. The starting point for a plugin could be the following code (from the documentation):

 (function($) {
   $.fn.myPlugin = function(settings) {
     var config = {'foo': 'bar'};
     if (settings) $.extend(config, settings);
     this.each(function() {
       // element-specific code here
     return this;

Plugins can be many things, small and large. A cool Plugin, just to show an example, is the FullCalendar Plugin. But there are lots out there. So have a look, maybe the feature you want to build is already there. If not, create your own. It’s nice to be more object oriented, even with your JavaScript, similar to your PHP coding. It makes it easier to (re-)use, develop, and cooler to look at the code ;-)

Create a jQuery plugin, 4.5 out of 5 based on 11 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 comment (leave a comment)

Useful information shared I’m really pleased to see this particular post..thanks for providing people wonderful tips.Great walk-through. I truly appreciate this post.

Leave a comment

You must be logged in to post a comment.