jGrowl is a plugin for the jQuery that generates unobtrusive notification boxes on a page. It has a similar design to the OS X Growl Framework, after which it is named. With jGrowl, web developers can easily display brief information messages and alerts to their users during busy sessions with complex web applications.
jGrowl integrates cleanly into jQuery, offering a simple API for displaying messages. By default, the message is displayed in an elegant black box for a few seconds, with a close button for the user to hide it manually. However, as expected of a jQuery API, the plugin also has a wealth of options to configure its behaviour, accepting parameters in JSON format.
Each message can be configured to be “stickied” – that is, to remain in place until dismissed by the user. New messages can also be added to the beginning of the stack, as opposed to the end, in a case where one or more jGrowl messages may already be visible. A number of options for configuring visual appearance are available, and jGrowl can use a specified CSS class as well, giving the developer full control over the final display. Message transitions are animated, and the animation effect can also be configured.
The API also features a number of powerful hooks, providing events on which user-defined functions can be fired – also passed in through the JSON configurations. For example, functions can be fired before and on opening and closing each message, as well as during the open animation and close animation.
Two versions are available, one recommended for jQuery 1.0.x, the other for jQuery 1.2.x, so jGrowl should be compatible with your existing jQuery-powered application. The standard download includes extensive samples, and it’s very easy to get started. Head over to the project page, or the jQuery plugin page for further details.