Система всплывающих сообщений

[ruslan_mart]

В общем, решил сделать вот такую систему всплывающих сообщений-подсказок. Надеюсь, кому-нибудь пригодится.

Версия 2.0
Работает в IE7+
В IE7-8 не отображается тень и круглые углы
В IE7-9 не работают эффекты анимации

Подключение:
Для подключения необходимо подключить в head (не обязательно в head, но лучше в head) вашего документа *js и *css файлы:

<link href="Message-2.0.css" rel="stylesheet" type="text/css">
<script src="Message-2.0.js" type="text/javascript"></script>

Все файлы Вы сможете найти в архиве, который прикреплён ниже.

Настройка:
В *js файле Вы можете найти в самом начале следующие переменные:

var DELAY = 5000, //длительность отображения сообщения, 1000 = 1 секунда. По умолчанию 5000 (5 секунды).
	ICON = '', //иконка, которая будет устанавливаться по умолчанию, если не передан параметр «icon».
	ICON_DIR = '', //директория к папке с иконками, например: '/desing/icons/'. Это позволит сократить Ваш код и не прописывать каждый раз полную директорию к файлу иконки.
	ICON_FORMAT = ''; //формат иконок, например: 'png'. Это позволит сократить Ваш код и не прописывать к каждой иконке формат

Рекомендуется хранить все иконки в одной папке и в одном формате (например *png), и указать эти данные в переменные ICON_DIR и ICON_FORMAT. Благодаря этому, вместо пути к иконке можно будет просто указывать имя файла нужной иконки - это позволит очень даже облегчить написание кода, а также снизит его объём.

Документация:

Для создания всплывающего окна используется следующий класс (красным помечены обязательные параметры):
Message(title, text, icon)

• title[String] — заголовок сообщения (см. подробное описание ниже).
• text[String] — текст сообщения.
• icon[String] — путь к иконке, графическому изображению (см. подробное описание ниже).

Свойства:

• color[String] — цвет текста сообщения.
• delay[Number] — длительность отображения сообщения (1000 = 1 секунда). По умолчанию используется значение константы DELAY, но если она не указана, то - 5000 (5 секунд).
• icon[String] — путь к иконке, графическому изображению. Рекомендуется использовать *png изображения с размером 64x64. По умолчанию используется значение константы ICON. Также свойство работает совместно с константами ICON_DIR и ICON_FORMAT, однако если указать путь с http(s) или /, то значения констант не будет использоваться - всё это позволит с лёгкостью указывать путь не только к уникальной папке с иконками, но и использовать альтернативные пути.
• text[String] — текст сообщения.
• title[String] — заголовок сообщения. Заголовок не должен быть слишком большим по количеству символов, старайтесь его описать как можно короче, например: «Ошибка», «Успех», «Совет», «Предупреждение» и т.д.
• visible[Boolean] (только для чтения) — если true - значит сообщение находится на экране в видимом состоянии, если false - значит сообщение не отображено.

Методы:

• hide(onhide = null) — скрывает сообщение с экрана, если оно видимо.

• onhide[Function] — дополнительное событие, которое сработает после исчезновения сообщения. Этот параметр не обязателен.

• remove(forcibly = false) — удаляет сообщение с экрана и из памяти.

• forcibly[Boolean] — если параметр указан в виде истинного значения, то сообщение мгновенно будет удалено с экрана без эффекта плавного исчезновения.

• show(newText = Message.text, remove = false, forcibly = false) — выводит сообщение на экран.

• newText[String] — новый текст сообщения. По умолчанию берётся текст, переданный в экземпляр класса Message.
• remove[Boolean] — если параметр указан в виде истинного значения, то сообщение будет удалено из памяти после его исчезновения с экрана.
• forcibly[Boolean] — если параметр указан в виде истинного значения и данное сообщение уже находится в видимом состоянии, то оно будет принудительно скрыто и отобразится заново.

• toggle(show) — выводит/удаляет сообщение в зависимости от его видимости и параметра show. Если параметр show не указан, то сообщение будет скрыто если оно видимо, и наоборот.

• show[Boolean] — если true, то сообщение будет показано (аналогично методу show), если false - сообщение будет скрыто (аналогично методу hide).

События:

• onclick[Function] — событие вызываемое по клику на сообщение. Если функция вернёт false, то сообщение по клику скрыто не будет.
• onhide[Function] — событие вызываемое после исчезновения сообщения с экрана.

Свойства и методы основного объекта Message:

• Свойства

• Message.lastItem — ссылка на последний созданный экземпляр Message.
• Message.items — массив со всеми созданными экземплярами Message.
• Message.visibleLength (только для чтения) — количество видимых сообщений на экране.

• Методы

• Message.each(callback[Function]) — вызовет callback для каждого экземпляра Message. В callback будет передано два аргумента: item (экземпляр Message), index (индекс экземпляра Message).
• Message.hideAll() — скроет все видимые сообщения.
• Message.removeAll(forcibly[Boolean]) — удалит все сообщения из памяти, предварительно скрыв видимые сообщения. Если параметр forcibly указан в виде истинного значения, то все видимые сообщения будут мгновенно скрыты без эффекта плавного исчезновения.
• Message.showAll(stepTime[Number]) — отобразит все скрытые сообщения. Если параметр stepTime указан в виде числа, то сообщения будут показываться по очереди с интервалом stepTime (1000 = 1 секунда).

Примеры использования:

//Создаём сообщение
var msg = new Message('Заголовок', 'Текст');

//Устанавливаем нужные параметры
msg.delay = 3000; //3 секунды
msg.icon = '/files/icons/myIcon.png';

//Вешаем события
msg.onclick = function() {
    alert('Вы кликнули по всплывающему сообщению!');
}
msg.onhide = function() {
    alert('Сообщение исчезло!');
}

//Выводим сообщение на экран
msg.show();


//Создаём одноразовое сообщение и сразу выводим его, после исчезновения сообщение будет удалено из памяти
new Message('Приветствие', 'Всем привет!', '/icons/hello.png').show(null, true);

Живые примеры:
http://learn.javascript.ru/play/blUGbb

Скачать:
Message-2.0.zip

[Safort]

А можно лучше пример на jsfiddle, а то сам знаешь что с learn.javascript.ru
Я ради забавы недавно тоже написал уведомлялку, хотелось бы сравнить)

[ruslan_mart]

Safort, добавил ссылку на jsfiddle.net

[Safort]

Ruslan_xDD,
я уже скачал и у себя запустил)
Скажем так, плеер у тебя лучше выглядел

[рони]

Ruslan_xDD,
font-size: 9pt; в ie невлазит

[ruslan_mart]

Safort, на белом фоне не очень смотрится. Если фон подогнать на весь документ, то вполне нормально должно смотреться, так как сами "сообщения" немного прозрачные. Но в любом случае, стили можно под себя подправить. Позже ещё сделаю тёмную версию.

рони, спасибо, поправим, не тестил просто в IE.

[ruslan_mart]

рони, протестировал на IE9-11, всё нормально работает. Можешь скрин сделать?

[ruslan_mart]

UPD: немного изменил стили, думаю теперь лучше смотрится.

[рони]

Ruslan_xDD,
может быть это только у меня так

[ruslan_mart]

рони, ну ничего себе у тебя в IE шрифт большой, спасибо. Есть какие-нибудь идеи по этому поводу? Может в самом font-family проблемы?