Каждый, кто хоть раз пользовался мобильным приложением, думаю, знаком с Toast-уведомлениями. Да, это именно неожиданно всплывающие сообщения, которые привлекают ваше внимание, когда вы увлечены в телефоне какой-то задачей.
В сети вы найдете тысячи готовых решений о том, как сделать Toast уведомления в Аndroid. А вот готового, простого решения из коробки для веб-браузеров, увы, не нашлось. Первой мыслью было взять какой-нибудь BOX-плагин и адаптировать его. Однако подобные плагины явно не способны смоделировать поведение Toast-уведомления.
Учитывая это, была создана небольшая JS-библиотека, эмитирующаю Toast-уведомления в браузере. Надеюсь, кому-то она будет полезной.
Для того, чтобы Toast уведомления заработали появились на вашей страничке, необходимо включить в ее содержимое всего две вещи.
Во-первых, подключить скрипт библиотеки.
<script src="js/toastjs.js"> </script>Во-вторых, в самом конце страницы, или где вам удобнее, вставить пустой div.
<div id="toastjs"></div>Именно с этой областью и будет в дальнейшем работать библиотека. Конечно, можно было бы заставить сам скрипт генерировать данную область. Но это лишний код и лишние операции с DOM.
Все… CSS код уже прописан в java scripte. А JQuery… Как можно без нее любимой? Оказывается, можно и без нее.
Для вызова Toast уведомления вызываем простую функцию, к примеру:
toast('tlс','Текст уведомления',3);
Первым параметром из трех латинских букв мы указываем положение Toasta на свой страничке. Первой буквой определяем положение по вертикали: T – вверху страницы, C- по центру экрана, B- внизу странички. Второй буквой определим положение по горизонтали: L, C, R, соответственно слева, по центру и справа, а также буквой J, в этом случае Тoast растягивается по всей ширине экрана. Третья буква определяет выравнивание текста внутри Тoast уведомления: L,C,R,J. Кто хоть раз верстал тексты, тот поймет, что к чему.
Скрипт определяет положение Тoast-уведомления исходя из текущего размера видимой области экрана, при этом само уведомление по возможности центрируется относительно указанной области экрана.
Буквы для указания месторасположения Тoast-уведомления латинские. Можно писать большими, а можно маленькими. Кому как удобнее.
Вторым параметром указывается сам текст Тoast уведомления. Ограничений на его содержимое специально не вводилось, желающие могут провести эксперименты по вставке в данный параметр различного html кода (рисунки, кстати, вставляются на ура). Правда, в этом случае не гарантируется четкость расположения Тoast-уведомления на самом экране.
Не стоит вставлять в Тoast-уведомление содержимое первого тома «Война и Мир». Максимум две–три строчки, больше посетитель вашего сайта просто просто не успеет проанализировать.
Ну и, наконец, третьим параметром указываем в секундах продолжительность показа Тoast-уведомления, включая время анимации. Продолжительность Тoast-уведомление может быть от трех (если указано меньше, время приравнивается к трем) до десяти (если указано больше, время приравнивается к десяти) секунд.
Одновременно можно вызвать на экран несколько Тoast-уведомлений. Для обработки используется общий таймер для всех Тoast-уведомлений, находящийся в данный момент времени на экране. В случае если области показа Тoast-уведомлений частично или полностью совпадают, то получается своеобразный Тoast-бутерброд, при этом последнее вызванное уведомление располагается над раннее вызванным.
Если кому то не понравился внешний вид Тoast-уведомлений, то просто заходим в код и исправляем стили на свои собственные.
Пример можно посмотреть тут.
Саму библиотеку можно скачать тут.
Автор: hecategram
