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]
    И цвет надо писать не в шестнадцатиричной системе, а текстом.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 8

    • UFO just landed and posted this here
        0
        скачайте архив jGrowl, там есть файл с примерами, всё очень доступно.
          0
          здесь было-бы наглядней…
          0
            0
            Спасибо. А то сходи да скачай. =)
          +1
          Аналог jGrowl — FaceBox.
            0
            добавил кармы и пригласил в блог jquery. Если добавить хабракат, то статье самое место там.
              0
              Благодарю, ничего не имею против помещения её туда. Но пока кармы нехватает

            Only users with full accounts can post comments. Log in, please.