Good Notification Plugin For Jquery?
I am looking at pines notify(http://pines.sourceforge.net/pnotify/) and it looks good but it seems to have little actual documentation so I am wondering is there anything more established and worked on out there?
Like I don't want to spend time trying to figure out how to use pines and then find out it is missing some feature that I needed a few months later that I needed to change to a different plugin.
This happened to me with tablesorter 2.0 I was using it then I needed the filtering but theirs kinda sucked so I found datatables what had such a bigger api and developed more.
So I am wondering if there is something like datatables(in terms of development and features) just for notifications instead.
Edit
So I am looking at jgrowl and kinda confused with how to use the theme roller with it.
So I took once of the example files and stripped it down with everything I thought was junk.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<title>jGrowl meet Twitter</title>
<link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
<link type="text/css" href="css/le-frog/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript">
$(function(){
$('.ui-state-default').hover(
function(){$(this).addClass('ui-state-hover');},
function(){$(this).removeClass('ui-state-hover');}
)
.mousedown(function(){$(this).addClass('ui-state-active');})
.mouseup(function(){$(this).removeClass('ui-state-active');})
.mouseout(function(){$(this).removeClass('ui-state-active');});
});
</script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// This value can be true, false or a function to be used as a callback when the closer is clciked
$.jGrowl.defaults.closer = function() {
console.log("Closing everything!", this);
};
$.jGrowl("Sticky notification with a header",
{
header: 'A Header',
sticky: true,
});
});
</script>
</head>
<body>
<div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-widget-header ui-corner-top">
<h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1>
</div>
</div>
</body>
</html>
I don't understand what this is for
<script type="text/javascript">
$(function(){
$('.ui-state-default').hover(
function(){$(this).addClass('ui-state-hover');},
function(){$(this).removeClass('ui-state-hover');}
)
.mousedown(function(){$(this).addClass('ui-state-active');})
.mouseup(function(){$(this).removeClass('ui-state-active');})
.mouseout(function(){$(this).removeClass('ui-state-active');});
});
</script>
It seems to have nothing to do with applying the themes. I took it away and the theme was still applied. Also if you look at my jgrow
$.jGrowl("Sticky notification with a header",
{
header: 'A Header',
sticky: true,
});
I make no mention of theme yet it still some how used the theme. Why is it taking the theme?
Answer
I'd like to add my 2cents by linking to my favourite, toastr.