jGrowl.1.2 — Введение

JGrowl — это плагин для всеми известного JQuery. Он позволяет выводить маленькие сообщения в пределах страницы браузера. Подобно тому как это работает в Growl Framework.

Для того что-бы начать работу с jGrowl, надо скачать этот самый jGrowl.
Скачать его можно с официального сайта разработчика stanlemon.net

На этом сайте можно посмотреть пример использования jGrowl.
LtbLinks.Ru
Там он используется для показа рекламы.



Далее прописываем в своём html:
[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 Опции:

В скобах значение по умолчанию

header [ Пустая строка ]
Эта опция задает заголовок сообщения.
Пример:
$.jGrowl('Текст уведомления', {Header: 'Заголовок сообщения'} );

sticky [ false ]
Если установлено true, то уведомление будет jотображаться на экране пока не будет закрыто пользователем. Если установлено false то сообщение исчезнет сразу после истечения срока жизни, который устанавливается с помощью параметра life.

glue [ after ]
Эта опция определяет, как будет вставляться уведомление в jGrowl контейнер. Если указано after, то уведомление вставляется после уведомлений в контейнере. Если before, то перед уведомлениями в контенере.

position [ top-right ]
Определяет класс применяемый к jGrowl конейнеру и управляющий его положением на экране. По умолчанию доступно несколько опций — это top-left, top-right, bottom-left, bottom-right, center. Эта опция должна быть установлена до запуска метода вызывающего уведомление.
Пример:
Для того чтобы, уведомления выводились в центре экрана надо написать так:
$.jGrowl.defaults.position = 'center';

theme [ default ]
Определяет CSS класс определяющий внешний вид выводимого уведомления.
Пример:
Создаем тему
div.jGrowl div.red_theme {
background-color: #F00;
color: #FFF;
}
Назначаем тему уведомлению
$.jGrowl('Уведомление', { theme: 'red_theme'});

corners [10px]
Eсли подключен плагин jQuery скривляющий углы, то спомощью данной опции можно регулировать радиус скругления углов для уведомления.
Плагин брать здесь: CORNERS

check [1000]
Определяет частоту с которой jGrowl будет проверять сообщения, которые подлежат удалению c экрана.
Пример:
Оптимальным вариантом для этого параметра будет, минимальное время жизни уведомления. В данном примере это 3 секунды.
$.jGrowl.defaults.check = 3000;

life [3000]
Определяет время жизни уведомления на экране. Т.е время по прошествии которого jGrowl будет считать его подлежащим к очистке и после которго оно будет удалено в ходе очередной проверки.

speed [ normal ]
Определяет скорость анимации при открытии и закрытии уведомления

easing [ swing ]
Определяет способ анимации при открытии и закрытии уведомления. По умолчанию доступны все способы анимации, что и для метода animate библиотеки jquery.

closer [ true ]
Определяет должна ли выводится кнопка close-all, когда на экране появляется более одного уведомления, true — выводится, false — не выводится. Так же может быть назанчена функция обратного вызова, которая будет срабатывать при нажатии на кнопку close-all.
Пример:
$.jGrowl.defaults.closer=true;

closeTemplate [amp;times;]
Опция содержит спец символ, который используется для кнопки закрыть для уведомления. Поумолчанию используется спец символ amp;times; который соответствует знаку умножения.
Пример:
$.jGrowl("Hello world!", {closeTemplate: 'A'});

closerTemplate [[ close all ]]
Это содержимое используется для создания ссылки close-all которая по умолчанию добавляется с низу jGrowl контейнера, и испоьзуется для закрытия всех уведомлений вконтейнере.
Пример:
$.jGrowl.closerTemplate = "Закрыть все уведомления";

log [ function(e,m,o) {} ]
Определяет функцию обратного вызова которая срабатывает прежде других при появлении уведомления. Это предоставляет пользователю удобный механиз ведения лога всех уведомлений jGrowl. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
Пример:
В данном примере в 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 + ")")
}

beforeOpen [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать перед тем, как откроется новое уведомление. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.

open [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать при открытии нового уведомления. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.

beforeClose [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать перед закрытием уведомления. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.

close [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать при открытии нового уведомления. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
Пример:
При закрытии уведомления, высветит alert с тем-же сообщением
$.jGrowl.('Hellow World', close: function(e,m,o){
alert(m);
}

animateOpen [{ opacity: 'show' }]
Анимационное свойство используемое при открытии уведомления (по умолчанию «проявление»).

animateClose [ { opacity: 'hide' } ]
Анимационное свойство используемое при закрытии уведомления (по умолчанию «затухание»).

Результаты тестирования:
IE7 — нет скруглённых углов, нет прозрачности
FF2 — всё внорме
FF3 — всё внорме
Opera 9.27 — не скруглённых углов, весь текст чёрным цветом
Opera 9.63 — нет скруглённых углов, весь текст чёрным цветом

Удалось решить проблему с чёрным цветом в Opera.
Нужно жёстко прописывать цвет текста элемента в самом документе, с помощью тегов
[style type=«text/css»]p {color: white;}[/style]
И цвет надо писать не в шестнадцатиричной системе, а текстом.