Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Система всплывающих сообщений (https://javascript.ru/forum/project/52818-sistema-vsplyvayushhikh-soobshhenijj.html)

ruslan_mart 08.01.2015 19:33

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

Версия 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

Скачать:
Вложение 2531

Safort 08.01.2015 19:43

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

ruslan_mart 08.01.2015 19:49

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

Safort 08.01.2015 19:51

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

рони 08.01.2015 19:54

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

ruslan_mart 08.01.2015 19:55

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

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

ruslan_mart 08.01.2015 20:07

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

ruslan_mart 08.01.2015 20:24

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

рони 08.01.2015 20:24

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

ruslan_mart 08.01.2015 20:28

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


Часовой пояс GMT +3, время: 17:10.