Показать Меню
falbar Alertify окна

Всплывающие окна Alertify

Alertify окна

Скучные JavaScript всплывающие окна – не самый лучший вариант информирования и общения с пользователем. В одной из прошлых статей я рассказывал, как легко и просто можно добавить «Сладкие Оповещения» на сайт, заменив стандартный вид alert-ов. Сегодня мы также рассмотрим хороший самодостаточный JavaScript код всплывающего окна под названием alertify.js. У него есть ряд преимуществ, которые делают его полезным инструментом в арсенале веб-разработчика.

Вот ссылка на «Сладкие Оповещения» о которых было упомянуто выше.

Говоря о преимуществах можно выделить несколько ключевых:

  • легко настраиваемый внешний вид (в архиве Вы найдёте 2 темы: по умолчанию и bootstrap);
  • красиво выезжающие Growl-like уведомления после отклика на alert-ы, которые можно использовать как обратную связь с пользователем.
  • использует только JavaScript возможности и не требует подключения сторонних библиотек;
  • кросс-браузерность;
  • у alertify.js есть своя полная документация.

Достоинств уже достаточно на твердую четверку, плюс каждый отметит что-нибудь для себя. Меня же особо порадовали мини-уведомления, которые не всегда встретишь в готовых скриптах модальных окон. Ну и весит alertify.js совсем немного. Сейчас почти на любом сайте навешано множество сторонних скриптов и библиотек, таких как jQuery и MooTools, а это, зачастую, лишняя нагрузка на страницы.

Если Вы, за время чтения вступления ещё не успели просмотреть примеры, которые я подготовил, то предлагаю изучить их и опробовать. На странице демо хорошо видно, как работает JavaScript всплывающих окон и его легкость в использовании. Мы же сейчас продолжим разбираться с alertify.js и, для начала, подключим сам плагин и его стили:

<link href="alertify.css" type="text/css" rel="stylesheet" />
<link href="alertify.default.css" type="text/css" rel="stylesheet" id="toggleCSS" />

Скрипт добавим в конце страницы:

<script src="alertify.min.js" type="text/javascript"></script>

Теперь у нас появился новый объект Alertify, а чтобы увидеть его содержание предлагаю воспользоваться firebug-ом.

Объект alertify

В этом объекте есть ещё два подобъекта, которыми мы и будем пользоваться для реализации наших модальных окон и уведомлений. В самом начале статьи я сказал, что данный скрипт самодостаточен и это так! К примеру, нам не нужно писать длинный вариант поиска элемента по id в DOM дереве – воспользуемся просто методом get(). Два других метода on() и off() как в jQuery, делают ровным счётом то же самое – навешивание событий на элементы или их удаление.

Теперь мы напишем вступительный кусок кода, в котором спрячем длинные обращения к методам и объектам:

var d = Alertify.dialog,
	l = Alertify.log,
	$ = Alertify.get;

Вот так будет гораздо удобнее. В своих примерах я не буду пользоваться методом on(), а воспользуюсь onclick для наглядности. Добавим HTML разметку для нашего первого alert-а:

<a class="button-primary" href="#" id="alert">Alert Dialog</a>

Воспользуемся плагином:

$("alert").onclick = function(){

	d.alert("Текстовое сообщение в модальном окне alert");

	return false;
};

Для создания модального окна confirm() так же добавим HTML:

<a class="button-primary" href="#" id="confirm">Confirm Dialog</a>

И воспользуемся соответствующим кодом:

$("confirm").onclick = function(){

	d.confirm("Текстовое сообщение в модальном окне confirm", function(){

		// При нажатие на "OK"
	}, function(){

		// При нажатие на "Cancel"
	});

	return false;
};

Остался у нас prompt(), добавляем HTML:

<a class="button-primary" href="#" id="prompt">Prompt Dialog</a>

И сам JavaScript код:

$("prompt").onclick = function(){

	d.prompt("Текстовое сообщение в модальном окне prompt", function(str){

		// При нажатие на "OK"
		// str - принимаемое значение в окне
	}, function(){

		// При нажатие на "Cancel"
	}, "Значение по умолчанию");

	return false;
};

Как видите основные модальные окна, мы рассмотрели и вряд ли с ними могут возникнуть трудности, а теперь перейдем к уведомлениям. Собственно, уведомления реализованы через объект log. И тут несколько вариантов как использовать, первый обычное сообщение:

l.info("Обычное выдвижное сообщение");

Сообщение об успешном событии:

l.success("Успешное уведомление");

Об ошибке:

l.error("Произошла ошибка заполнение формы");

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

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено