Скучные 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-ом.
В этом объекте есть ещё два подобъекта, которыми мы и будем пользоваться для реализации наших модальных окон и уведомлений. В самом начале статьи я сказал, что данный скрипт самодостаточен и это так! К примеру, нам не нужно писать длинный вариант поиска элемента по 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-ы и уведомления у себя в проекте. Надеюсь, данное решение вам пригодится в своей работе и практике, а на этом у меня всё.