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

5 октября 2015 Антон Кулешов 2351 0

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

Реклама

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

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

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

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

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

<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-ом.

obekt-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-ы и уведомления у себя в проекте. Надеюсь, данное решение вам пригодится в своей работе и практике, а на этом у меня всё.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Подписываем фотографии

1 сентября 2015 Антон Кулешов

Фотографии на сайте делают его живым и интересным, порой бывает не лишним подписать места, события, а то и людей изображенных на фото. В свое время, опция отмечания друзей на снимках была невероятно популярно в социальных сетях. Если блог о путешествиях, кулинарный или любой другой, где изображений много и они собраны в галереи, то подписанные снимки будут выглядеть выигрышнее безымянных. Я же предлагаю для этих целей воспользоваться jQuery плагином taggd – скриптом, позволяющим сделать всплывающие подсказки для подписи фотографий.

Слайдер карусель

7 октября 2015 Антон Кулешов

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 Антон Кулешов

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.