jQuery Growl
jQuery Growl is a Growl like notification plugin for jQuery (tested with version 1.2.3).
You can view a demo of it here:
http://projects.zoulcreations.com/jquery/growl/
Or download the uncompressed source here:
http://projects.zoulcreations.com/jquery/growl/jquery.growl.js
jQuery Growl is easily 'skinned' (themed, templated, whatever you want to call it) by using the following code syntax:
JavaScript:
-
$.growl.settings.displayTimeout = 4000;
-
$.growl.settings.noticeTemplate = ''
-
+ '<div>'
-
+ '<div style="float: right; background-image: url(my.growlTheme/normalTop.png); position: relative; width: 259px; height: 16px; margin: 0pt;"></div>'
-
+ '<div style="float: right; background-image: url(my.growlTheme/normalBackground.png); position: relative; display: block; color: #ffffff; font-family: Arial; font-size: 12px; line-height: 14px; width: 259px; margin: 0pt;">'
-
+ ' <img style="margin: 14px; margin-top: 0px; float: left;" src="%image%" />'
-
+ ' <h3 style="margin: 0pt; margin-left: 77px; padding-bottom: 10px; font-size: 13px;">%title%</h3>'
-
+ ' <p style="margin: 0pt 14px; margin-left: 77px; font-size: 12px;">%message%</p>'
-
+ '</div>'
-
+ '<div style="float: right; background-image: url(my.growlTheme/normalBottom.png); position: relative; width: 259px; height: 16px; margin-bottom: 10px;"></div>'
-
+ '</div>';
-
$.growl.settings.noticeCss = {
-
position: 'relative'
-
};