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:
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:
See for yourself and let me know what you think - as usual.
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:
Usage
The basic usage is quite simple:$(document).ready(function() {
$.dNotify('good', "Welcome to The Web Thought test page! :)", {duration: 3000});
}); $.dNotify("show", {
message: "Test",
sticky: false,
duration: 2000,
type: "good"
});The parameters
The list of the possible parameters is:| sticky | boolean - 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 |
| duration | milliseconds - for non sticky message, it sets the message duration |
| slideTime | milliseconds - it sets the animation duration (show/hide of message) |
| message | "text" - the message to be shown |
| type | "good", "bad" or "warn" - type of message |
| showIcon | boolean - if true, the message has an icon |
| iconPosition | "left" or "right" - it sets the icon position |
| iconFile | the 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”);$.dNotify(“closeAll”);Conclusion
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.