JGrowl — это плагин для всеми известного JQuery. Он позволяет выводить маленькие сообщения в пределах страницы браузера. Подобно тому как это работает в Growl Framework.
Для того что-бы начать работу с jGrowl, надо скачать этот самый jGrowl.
Скачать его можно с официального сайта разработчика stanlemon.net
На этом сайте можно посмотреть пример использования jGrowl.
LtbLinks.Ru
Там он используется для показа рекламы.
Далее прописываем в своём html:
Всё! Теперь можно шкодить:)
Простой пример:
Без коментариев! :) Далее смотрите опции.
В скобах значение по умолчанию
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. Эта опция должна быть установлена до запуска метода вызывающего уведомление.
Пример:
Для того чтобы, уведомления выводились в центре экрана надо написать так:
theme [ default ]
Определяет CSS класс определяющий внешний вид выводимого уведомления.
Пример:
corners [10px]
Eсли подключен плагин jQuery скривляющий углы, то спомощью данной опции можно регулировать радиус скругления углов для уведомления.
Плагин брать здесь: CORNERS
check [1000]
Определяет частоту с которой jGrowl будет проверять сообщения, которые подлежат удалению c экрана.
Пример:
Оптимальным вариантом для этого параметра будет, минимальное время жизни уведомления. В данном примере это 3 секунды.
life [3000]
Определяет время жизни уведомления на экране. Т.е время по прошествии которого jGrowl будет считать его подлежащим к очистке и после которго оно будет удалено в ходе очередной проверки.
speed [ normal ]
Определяет скорость анимации при открытии и закрытии уведомления
easing [ swing ]
Определяет способ анимации при открытии и закрытии уведомления. По умолчанию доступны все способы анимации, что и для метода animate библиотеки jquery.
closer [ true ]
Определяет должна ли выводится кнопка close-all, когда на экране появляется более одного уведомления, true — выводится, false — не выводится. Так же может быть назанчена функция обратного вызова, которая будет срабатывать при нажатии на кнопку close-all.
Пример:
closeTemplate [amp;times;]
Опция содержит спец символ, который используется для кнопки закрыть для уведомления. Поумолчанию используется спец символ amp;times; который соответствует знаку умножения.
Пример:
closerTemplate [[ close all ]]
Это содержимое используется для создания ссылки close-all которая по умолчанию добавляется с низу jGrowl контейнера, и испоьзуется для закрытия всех уведомлений вконтейнере.
Пример:
$.jGrowl.closerTemplate = "Закрыть все уведомления";
log [ function(e,m,o) {} ]
Определяет функцию обратного вызова которая срабатывает прежде других при появлении уведомления. Это предоставляет пользователю удобный механиз ведения лога всех уведомлений jGrowl. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
Пример:
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 с тем-же сообщением
animateOpen [{ opacity: 'show' }]
Анимационное свойство используемое при открытии уведомления (по умолчанию «проявление»).
animateClose [ { opacity: 'hide' } ]
Анимационное свойство используемое при закрытии уведомления (по умолчанию «затухание»).
Результаты тестирования:
IE7 — нет скруглённых углов, нет прозрачности
FF2 — всё внорме
FF3 — всё внорме
Opera 9.27 — не скруглённых углов, весь текст чёрным цветом
Opera 9.63 — нет скруглённых углов, весь текст чёрным цветом
Удалось решить проблему с чёрным цветом в Opera.
Нужно жёстко прописывать цвет текста элемента в самом документе, с помощью тегов
[style type=«text/css»]p {color: white;}[/style]
И цвет надо писать не в шестнадцатиричной системе, а текстом.
Для того что-бы начать работу с 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]
И цвет надо писать не в шестнадцатиричной системе, а текстом.