AJAX-светофорчики
by Larin
Интро
Вот появилась свободная минутка… В далеком 2007-ом году у меня была статья о “flash-сообщениях” – сообщения которые мы показываем пользователю после перезагрузки страницы. Очень удобная и нужная штука :)
Но эти сообщения не подходят для AJAX-обработчиков. Что же делать? Ведь AJAX-функций на наших сайтах становится все больше.
И вот сегодня, по служебной необходимости, мне понадобилось уведомлять пользователей о результатах AJAX-функций.
Пара строчек на JS + jQuery и готово!
В отличии от предыдущей статьи, никаких диаграмм мы чертить не будем, здесь все гораздо проще. Нам просто нужно создать в теле документа контейнер, разместить его, например, в правом верхнем углу браузера и выводить в него блоки сообщений. Все просто. Начнем с конца – с оформления.
CSS
#ajax_alert {
width:400px;
position:fixed;
top:0; right:0;
z-index:7777;
}
* html #ajax_alert { /* IE fix */
position:absolute;
top:expression(eval(document.documentElement.scrollTop) + 'px');
}
#ajax_alert .item {
display:none;
padding:10px;
color:#fff;
font-size:1em;
border:1px solid #fff;
}
#ajax_alert .item h2 {
margin:0 0 0.5em 0;
font-size:1.4em;
}
#ajax_alert .message {
background:#80c875;
}
#ajax_alert .error {
background:#ec977b;
}
#ajax_alert .notice {
background:#0099FF;
}
Вот такой простенький получился CSS. Елемент с id ajax_alert и есть наш контейнер. В него мы будем добавлять блоки сообщений с общим классом item и дополнительными классами: message, error, notice, в зависимости от типа сообщения. Различаться они будут только цветом блока. Само сообщения у нас будет состоять их 2 частей: заголовок и текст.
Теперь все, что нужно у нас есть, приступим к написанию JS’а.
JavaScript, jQuery и все, все, все…
Сразу приведу эти 2 строчки кода:
var Alert = {
show: function(title, text, class_name) {
if (!$('#ajax_alert').attr('id')) {
$('<div id="ajax_alert"></div>').appendTo(document.body);
}
$('<div class="item ' + class_name + '"><h2>' + title + '</h2>' + text + '</div>')
.prependTo($('#ajax_alert'))
.fadeIn('slow')
.animate({opacity: 1.0}, 3000)
.fadeOut('slow', function() {$(this).remove();});
}
}
Вот и все! Задача выполнена. Можно встраивать в проект и идти пить чай.
HTML (пример использования)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Alert Ajax</title>
<link rel="stylesheet" type="text/css" media="all" href="main.css" />
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/alert.js" type="text/javascript"></script>
<script type="text/javascript">
function request() {
//Тут мы делаем обращение к серверу
//возвращаем результат и в зависимости от него
//выводим сообщение
if (result) {
Alert.show('Заголовок сообщения', 'Поздравляем! Что-то выполнилось', 'message');
} else {
Alert.show('Заголовок сообщения', 'При выполнении чего-то произошла ошибка', 'error')
}
}
</script>
</head>
<body>
<a href="#" onclick="request(); return;">Кликни!</a>
</body>
</html>