|
Система всплывающих сообщений
Вложений: 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. Благодаря этому, вместо пути к иконке можно будет просто указывать имя файла нужной иконки - это позволит очень даже облегчить написание кода, а также снизит его объём. :) Документация: Для создания всплывающего окна используется следующий класс (красным помечены обязательные параметры): Примеры использования: //Создаём сообщение 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 |
А можно лучше пример на jsfiddle, а то сам знаешь что с learn.javascript.ru :(
Я ради забавы недавно тоже написал уведомлялку, хотелось бы сравнить) |
Safort, добавил ссылку на jsfiddle.net :)
|
Ruslan_xDD,
я уже скачал и у себя запустил) Скажем так, плеер у тебя лучше выглядел :) |
Ruslan_xDD,
font-size: 9pt; в ie невлазит |
Safort, на белом фоне не очень смотрится. :) Если фон подогнать на весь документ, то вполне нормально должно смотреться, так как сами "сообщения" немного прозрачные. Но в любом случае, стили можно под себя подправить. Позже ещё сделаю тёмную версию. :)
рони, спасибо, поправим, не тестил просто в IE. ;) |
рони, протестировал на IE9-11, всё нормально работает. Можешь скрин сделать?
|
UPD: немного изменил стили, думаю теперь лучше смотрится.
|
|
рони, ну ничего себе у тебя в IE шрифт большой, спасибо. :) Есть какие-нибудь идеи по этому поводу? Может в самом font-family проблемы?
|
Часовой пояс GMT +3, время: 03:27. |
|