Tuesday, 18 September 2012

jQuery: dNotify - A simple user notification plugin for jQuery


Today we are going to talk about dNotify, a simple user notification plugin for jQuery.
The way this simple plugin works is very interesting. Because I usually hate when popup message start to - well - pop up all over the web site, I've found dNotify quite unobtrusive. Moreover, we should consider the use of dNotify in web applications, where we do need to interact with the user more than in other situations.
What makes the plugin almost unique is the fact we can control everything about the notification.
Let's see how we can use it.

Download and include
Well... as usual, we need to dowload the .js and css files from the github repository (follow the link above). After that we need to include jQuery and the plugin, together with the stylesheet:
<link rel="stylesheet" type="text/css" href="/css/dNotify.css" media="screen" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.dNotify.min.js"></script>
Check the path for your files and change them according to your site structure.

The basic usage is quite simple:
$(document).ready(function() {
    $.dNotify('good', "Welcome to The Web Thought test page! :)", {duration: 3000});
however, we should use a different way of showing the notification message. I know it looks more complicated, but if we need to benefit from the plugin parameters, the following code should be used:
 $.dNotify("show", {
    message: "Test",
    sticky: false,
    duration: 2000,
    type: "good"
Now, what's all that? Let's move on and see the available parameters.

The parameters
The list of the possible parameters is:
stickyboolean - if false the message will be shown just for a specified period of time, if true the message is permanent, and the user needs to click on the message to close it
durationmilliseconds - for non sticky message, it sets the message duration
slideTimemilliseconds - it sets the animation duration (show/hide of message)
message"text" - the message to be shown
type"good", "bad" or "warn" - type of message
showIconboolean - if true, the message has an icon
iconPosition"left" or "right" - it sets the icon position
iconFilethe file to be used as icon

The CSS and other methods
As we have seen above, we have to include a .css file together with the plugin file.
The css file can obviously be manipulated to change, for example the type of message (good, bad or warn).
At the same time dNotify has some other interesting methods like:
$.dNotify(“close”, "type”);
that closes all message of the specified type. While
closes all messages.

There's not much more to say about dNotify. I've found it quite useful and highly flexible, as I said, specifically in web applications.
See for yourself and let me know what you think - as usual.

0 thoughts:

Post a Comment

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.