Уведомления jGrowl

jGrowl

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Вывести уведомление с помощью jGrowl очень просто. Не сложнее чем вызвать alert (но в отличие от последнего, jGrowl не приостановит выполнения других скриптов на странице). По умолчанию, уведомление исчезнет через 3 секунды. Это время можно изменить, а можно сделать так, чтобы оно вообще не исчезало. Для этого необходимо установить опцию sticky в true.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/jGrowl/jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
  ~lt~link href='/plagins/jGrowl/jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~script~gt~
    $.jGrowl("Hello world!", {sticky:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Заголовки~lt~/tit~gt~
~lt~coment~gt~В параметре header можно задать заголовки к уведомлениям.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/jGrowl/jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
  ~lt~link href='/plagins/jGrowl/jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~script~gt~
    $.jGrowl("Кодинг в нетрезвом виде может привести к непоправимым последствиям! ~lt~br~gt~ Достаточно посмотреть на IE 6", {header:'Программист, будь бдителен!', sticky:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Оформление~lt~/tit~gt~
~lt~coment~gt~У уведомлений jGrowl очень просто изменить оформление. В параметре theme можно указать класс, который будет присвоен всем элементам уведомлений. Можно задать стили для этого класса самостоятельно, а можно например использовать стили jQuery UI (стилизация уведомлений jGrowl тесно связана с jQuery UI).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/jGrowl/jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
  ~lt~link href='/plagins/jGrowl/jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~
  ~lt~link href='/ui/jqueryui.custom.css' rel='stylesheet' type='text/css'~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~script~gt~
    $.jGrowl("Hello world!", {sticky:true, theme:'ui-state-highlight'});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Расположение~lt~/tit~gt~
~lt~coment~gt~Уведомления могут располагаться в пяти местах: четырех углах и центре страницы. За расположение отвечает свойство position.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/jGrowl/jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
  ~lt~link href='/plagins/jGrowl/jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~script~gt~
    $.jGrowl.defaults.position = 'bottom-left';
    $.jGrowl("Hello world!", {sticky:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Порядок вставки~lt~/tit~gt~
~lt~coment~gt~По умолчанию, каждое следующее уведомление появляются (располагается) после предыдущего. Это можно изменить с помощью свойства glue, установив его в 'before'.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/jGrowl/jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link href='/plagins/jGrowl/jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~script~gt~
    $.jGrowl.defaults.closer = false;
    $.jGrowl("Hello world!", {glue:'before'});
    $.jGrowl("Hello world 2!", {glue:'before'});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Элемент closer~lt~/tit~gt~
~lt~coment~gt~Если открываются более одного уведомления, то вместе с ними появляется элемент closer, нажатие по которому приводит к закрытию всех уведомлений. Появление этого элемента можно отменить, если отключить свойство closer.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/jGrowl/jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
  ~lt~link href='/plagins/jGrowl/jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~script~gt~
    $.jGrowl("Hello world!", {sticky:true});
    $.jGrowl("Hello world 2!", {sticky:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Анимация~lt~/tit~gt~
~lt~coment~gt~По умолчанию, появление и исчезновение уведомлений происходит с анимацией fadeIn и fadeOut. Но с помощью свойств animateOpen, animateClose, easing и speed можно можно задавать и настраивать самостоятельно. (Подробности работы с анимациями можно найти в разделе Эффекты, на этом сайте)~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/jGrowl/jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
  ~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
  ~lt~link href='/plagins/jGrowl/jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~script~gt~
    $.jGrowl("Hello world!", {
      animateOpen:{width:'show', opacity:'show'},
      animateClose:{width:'hide', opacity:'hide'},
      speed:100,
      easing:'linear'
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="jquery.jgrowl_minimized.js"~gt~~lt~/script~gt~
~lt~link href='jquery.jgrowl.css' rel='stylesheet' type='text/css'~gt~

// ------- Работа со свойством header ---------
// при вызове уведомления
$.jGrowl('Hello world!', {header:'Hey!'});

// ------- Работа со свойством sticky ---------
// при вызове уведомления
$.jGrowl('Hello world!', {sticky:true});

// ------- Работа со свойством glue ---------
// при вызове уведомления
$.jGrowl('Hello world!', {glue:'before'});

// ------- Работа со свойством position ---------
$.jGrowl.defaults.position = 'bottom-right';
$.jGrowl('Hello world!');

// ------- Работа со свойством theme ---------
$.jGrowl('Hello world!', {theme:'blackAlert'});

// ------- Работа со свойством corners ---------
$.jGrowl('Hello world!', {corners:'3px'});

// ------- Работа со свойством check ---------
$.jGrowl.defaults.check= 300;
$.jGrowl('Hello world!');

// ------- Работа со свойством life ---------
$.jGrowl('Hello world!', {life:10000});

// ------- Работа со свойством speed ---------
$.jGrowl('Hello world!', {speed:100});

// ------- Работа со свойством easing ---------
$.jGrowl('Hello world!', {easing:'linear'});

// ------- Работа со свойством closer ---------
$.jGrowl.defaults.closer = false;
$.jGrowl('Hello world!');

// ------- Работа со свойством closeTemplate ---------
$.jGrowl.defaults.closeTemplate = 'закройся!';
$.jGrowl('Hello world!');

// ------- Работа со свойством closerTemplate ---------
$.jGrowl.defaults.closerTemplate = '~lt~div~gt~[ Закрыть все ]~lt~/div~gt~';
$.jGrowl('Hello world!');

// ------- Работа со свойством log ---------
$.jGrowl.defaults.log = function($e, m, o){
  logSystem.add(o.header, m);
};

$.jGrowl('Hello world!');

// ------- Работа со свойством beforeOpen ---------
$.jGrowl.defaults.beforeOpen = function($e, m, o){
  alert('Сейчас будет открыто уведомление');
};

$.jGrowl('Hello world!');

// ------- Работа со свойством open ---------
$.jGrowl.defaults.open = function($e, m, o){
  alert('Уведомление открыто');
};

$.jGrowl('Hello world!');

// ------- Работа со свойством beforeClose ---------
$.jGrowl.defaults.beforeClose = function($e, m, o){
  alert('Уведомление сейчас будет закрыто');
};

$.jGrowl('Hello world!');

// ------- Работа со свойством close ---------
$.jGrowl.defaults.close = function($e, m, o){
  alert('Уведомление закрыто');
};

$.jGrowl('Hello world!');

// ------- Работа со свойством animateOpen ---------
$.jGrowl('Hello world!', { animateOpen:{width:'show'} });

// ------- Работа со свойством animateClose ---------
$.jGrowl('Hello world!', { animanimateCloseateOpen:{width:'hide'} });