I’ve been using jQuery as a backbone for my Javascript projects now for a while and it is really making life alot easier! In fact, I think it’s pretty close to genius! In this tutorial I’ll describe the how to make a simple jQuery plugin which throws notification messages (like the famous OSX notification system Growl). An immediate reaction to my choice of application might perhaps be: why!? there are plenty of “Growl” plugins for jQuery already, why not use any of them? Well, there are two answers to this:

  • I made some (quick) research, and I could not find any plugin which was simple enough for my needs. Also, I wanted a plugin that completely separated style from functionality, ie. not adding any inline/static CSS to elements.
  • Because it’s fun!

Understanding basic jQuery

First we need to understand how to extend jQuery with new functionality. Normally when we add new methods or properties to a class/array/string etc. we use the ‘prototype‘ keyword which adds the property to all future instances of the object. This is the case for jQuery aswell. However jQuery has a shortcut for this, the ‘fn’ member. So, the following two statements are equal:

It seems like using ‘fn’ instead of prototype is common practice, so let’s do that. While we’re in it, there is a third way of adding new methods to the jQuery object: using the jQuery array utility ‘extend‘ which sort of ‘merges’ the content of two arrays:

This might be more handy when adding multiple items. Another common practice in the jQuery plugin development world seems to be that you should wrap the extension into an anonymous function to avoid conflicts with other libraries.

Writing like this, we pass the jQuery object into the function and we are free to use a parameter name of our choice when extending. However, I’ll stick to the $. Ok, next we need to now how to behave inside our new function. All the matched elements that jQuery has selected for us will be available in the ‘this’ object. So if we run eg:

the ‘this’ object will refer to a list of elements with the classname ‘selected’ once inside our new function. Now that we know how to access them we can loop through them and do something fun with them:

Great! now we also know how to affect the elements that jQuery selects for us! As you might have noticed in the code above, we also have to return the ‘this’ object when we’re done in order to allow function chaining, eg like this:

For futher reading on jQuery plugin development I recommend the Plugins/Authoring section on jquery.com

Growling

We now have sufficient knowledge to write the simple Growl-plugin that I promised. The concept is easy: we’ll just add a notification box with a user defined text into a container element selected by jQuery, and then remove it in an attractive way after a while. Also, the user should be able to control whether the notification should be sticky which enables a manual removal button. The code for all this is fairly simply so I’ll just throw it out here:

There is a limitation in the code above: it will only add a notification box to the first matched element (see line 22 above). In order to allow some styling I add the classes ‘notice-inner’ and ‘notice-outer’. I’m not going to post a complete CSS/HTML setup here but just to get you up to speed with something, here’s a small CSS snippet for some basic styling:

I’m using a div with id=’EventContainer’ as a container for the notifications so that I can place it in the top right corner of the browser window. Once we have some style applied, we’ll just start making notifications with the new Growl-plugin like this:

For a complete demo visit this link See you next time!