jGrowl.1.2 - Introduction

JGrowl is a plugin for the well-known jQuery. It allows you to display small messages within the browser page. Just like it works in the Growl Framework .

In order to start working with jGrowl, you need to download this very jGrowl.
You can download it from the official site of the developer stanlemon.net.

On this site you can see an example of using jGrowl.
LtbLinks.Ru
There it is used to display advertisements.



Next, we prescribe in our html: That's it! Now you can skoda :) A simple example: No comments! :) Next, see the options.
[script type="text/javascript" src="jquery-1.2.6.js"][/script]
[script type="text/javascript" src="jquery.jgrowl.js"][/script]
[link rel="stylesheet" href="growl.css" type="text/css" /]




$(document).ready(function(){

$.jGrowl("Hello world!");
// Sample 2
$.jGrowl("Stick this!", { sticky: true });
// Sample 3
$.jGrowl("A message with a header", { header: 'Important' });
// Sample 4
$.jGrowl("A message that will live a little longer.", { life: 10000 });
// Sample 5
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
beforeClose: function(e,m) {
alert('About to close this notification!');
},
animateOpen: {
height: 'show'
}
});

});


jGrowl Options:

In parentheses, the default value is

header [Empty line]
This option sets the message header.
Example:
$.jGrowl('Текст уведомления', {Header: 'Заголовок сообщения'} );

sticky [false]
If set to true, then the notification will be displayed on the screen until it is closed by the user. If set to false, the message will disappear immediately after the expiration of the lifetime, which is set using the life parameter.

glue [after]
This option determines how the notification will be inserted into the jGrowl container. If after is specified, then the notification is inserted after the notifications in the container. If before, then before notifications in the container.

position [top-right]
Defines the class applied to the jGrowl container and controls its position on the screen. By default, several options are available - these are top-left, top-right, bottom-left, bottom-right, center. This option must be set before the notification caller is started.
Example:
In order for notifications to be displayed in the center of the screen, write this:
$.jGrowl.defaults.position = 'center';

theme [default]
Defines a CSS class that defines the appearance of the displayed notification.
Example: corners [10px] If the jQuery plug-in is used for aligning corners, using this option you can adjust the radius of rounding of corners for notification. Plugin taken here: CORNERS check [1000]
Создаем тему
div.jGrowl div.red_theme {
background-color: #F00;
color: #FFF;
}
Назначаем тему уведомлению
$.jGrowl('Уведомление', { theme: 'red_theme'});






Defines the frequency with which jGrowl will check messages that are to be deleted from the screen.
Example: The
best option for this parameter would be a minimum notification lifetime. In this example, it is 3 seconds.
$.jGrowl.defaults.check = 3000;

life [3000]
Defines the lifetime of the notification on the screen. That is, the time after which jGrowl will consider it to be cleaned and after which it will be deleted during the next check.

speed [normal]
Defines the animation speed when opening and closing a notification

easing [swing]
Defines the animation method when opening and closing a notification. By default, all animation methods are available, as for the animate method of the jquery library.

closer[true]
Determines whether the close-all button should be displayed when more than one notification appears on the screen, true - is displayed, false - is not displayed. A callback function can also be triggered, which will work when you click on the close-all button.
Example:
$.jGrowl.defaults.closer=true;

closeTemplate [amp; times;]
The option contains a special character that is used for the close button for notification. The default character is amp; times; which corresponds to the sign of multiplication.
Example:
$.jGrowl("Hello world!", {closeTemplate: 'A'});

closerTemplate [[close all]]
This content is used to create a close-all link which is added by default from the bottom of the jGrowl container and is used to close all notifications in the container.
Example:
$ .jGrowl.closerTemplate = "Close All Notifications";

log [function (e, m, o) {}]
Defines a callback function that fires before others when a notification appears. This provides the user with a convenient logging mechanism for all jGrowl notifications. The function accepts three parameters: notification as a DOM element, notification message and options.
Example: beforeOpen [function (e, m, o) {}] Defines a callback function that will fire before a new notification opens. The function accepts three parameters: notification as a DOM element, notification message and options. open [function (e, m, o) {}]
В данном примере в div с идентификатором logs, записывается информация об уведомлении.

А именно:
$(e).attr('id') - идентификатор id уведомления,
(new Date()).getTime() - дата создания уведомления,
m - сообщение уведомления,
o.theme - тема уведомления

$.jGrowl.defaults.log = function(e,m,o) {
$('#logs').append("" + $(e).attr('id') + "" + (new Date()).getTime() + ": " + m + " (" + o.theme + ")")
}





Defines a callback function that will fire when a new notification is opened. The function accepts three parameters: notification as a DOM element, notification message and options.

beforeClose [function (e, m, o) {}]
Defines a callback function that will fire before the notification closes. The function accepts three parameters: notification as a DOM element, notification message and options.

close [function (e, m, o) {}]
Defines a callback function that will fire when a new notification is opened. The function accepts three parameters: notification as a DOM element, notification message and options.
Example:
When closing a notification, it will display an alert with the same message animateOpen
$.jGrowl.('Hellow World', close: function(e,m,o){
alert(m);
}

[{opacity: 'show'}]
An animation property used when a notification is opened (default is “manifest”).

animateClose [{opacity: 'hide'}]
An animated property used when closing a notification (default is “fade”).

Testing results:
IE7 - no rounded corners, no transparency
FF2 - all ok
FF3 - all ok
Opera 9.27 - no rounded corners, all text in black
Opera 9.63 - no rounded corners, all text in black

I managed to solve the problem with black in Opera.
It is necessary to strictly register the color of the text of the element in the document itself, using the tags
[style type = "text / css"] p {color: white;} [/ style]
And the color must be written not in the hexadecimal system, but in text.