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>

Рабочий пример

Смотрим