lundi 17 septembre 2012
jQuery: dNotify - A simple user notification plugin for jQuery
Do you like this story?
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.$(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.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 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$.dNotify(“closeAll”);
closes all messages.See for yourself and let me know what you think - as usual.
This post was written by: Franklin Manuel
Franklin Manuel is a professional blogger, web designer and front end web developer. Follow him on Twitter
0 Responses to “jQuery: dNotify - A simple user notification plugin for jQuery”
Enregistrer un commentaire