Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2015, 19:33
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

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

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

Последний раз редактировалось ruslan_mart, 14.01.2015 в 14:54.
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2015, 19:43
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

А можно лучше пример на jsfiddle, а то сам знаешь что с learn.javascript.ru
Я ради забавы недавно тоже написал уведомлялку, хотелось бы сравнить)
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2015, 19:49
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

Safort, добавил ссылку на jsfiddle.net
Ответить с цитированием
  #4 (permalink)  
Старый 08.01.2015, 19:51
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Ruslan_xDD,
я уже скачал и у себя запустил)
Скажем так, плеер у тебя лучше выглядел
Ответить с цитированием
  #5 (permalink)  
Старый 08.01.2015, 19:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,050

Ruslan_xDD,
font-size: 9pt; в ie невлазит
Ответить с цитированием
  #6 (permalink)  
Старый 08.01.2015, 19:55
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

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

рони, спасибо, поправим, не тестил просто в IE.
Ответить с цитированием
  #7 (permalink)  
Старый 08.01.2015, 20:07
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

рони, протестировал на IE9-11, всё нормально работает. Можешь скрин сделать?
Ответить с цитированием
  #8 (permalink)  
Старый 08.01.2015, 20:24
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

UPD: немного изменил стили, думаю теперь лучше смотрится.
Ответить с цитированием
  #9 (permalink)  
Старый 08.01.2015, 20:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,050

Ruslan_xDD,
может быть это только у меня так
Ответить с цитированием
  #10 (permalink)  
Старый 08.01.2015, 20:28
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Операционная Система на JS Icat Общие вопросы Javascript 3 17.04.2018 23:54
Node.js и задержки с доставкой сообщений IgorN AJAX и COMET 5 12.04.2013 17:09
Логика звукового уведомления о поступлении новых сообщений Триви AJAX и COMET 1 11.08.2011 02:13
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55
Авто "объединение" последних сообщений ksa Сайт Javascript.ru 0 19.11.2010 11:58