Софкейз

Всем привет, что-то меня в последнее время все больше и больше тянет на UI разработку :) Сегодня поговорим о том как создать красивые уведомления на сайте используя CSS3, а также как их привести в действие используя jQuery. Сами уведомления имеют небольшую кастомизацию, например можно показывать или скрывать превью-картинку, также можно ставить таймер на автоматическое закрытие, и оба функционала работают на каждое уведомление в отдельности.

И так, в первую очередь нам надо будет подготовить вертску и стили, в стилях мы будем использовать свойства из CSS3, а именно такие как градиент, border-radius, box-shadow, text-shadow, и opacity.

Шаг первый. Верстка

Нам нужно подготовить верстку для контейнера уведомления, чтобы на будущее знать как именно её нам генерировать в яваскрипте для вывода. Также нам нужен контейнер, в котором будут выводиться уведомления. Сам контейнер у нас будет:

<div id="notifier-box"></div>

Верстка контейнера уведомления будет следующая:

<div class="message-wrap">
	<div class="message-box">
		<a class="message-close" href="#" title="Закрыть уведомление"></a>
		<div class="message-header">Тайтл уведомления</div>
		<div class="message-body">
			<div class="thumb"><img src="image.png"></div>
			<span>Тут будет текст уведомления</span>
		</div>
	</div>
</div>

Так, с версткой мы определились, теперь пора застайлить бы все это, как можно красивее конечно же, ведь мы же любим когда все красиво :)

Шаг второй. Стилизация

И так контейнер каждого уведомления у нас будет с темным фоном, и даже градиентом, будет отбрасывать небольшую тень, также будут закругленные углы, а текст будет иметь строгую тень, откидывающаяся на один пиксель вниз по вертикали. Заголовок уведомления будет зеленного цвета, текст уведомления серего цвета. Собственно набрасываем все это в CSS и получаем вот такой код:

#notifier-box {
	position: fixed;
	bottom: 0;
	right: 10px;
}

div.message-wrap {
	background: #111;
	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#111111');
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(1, #111));
	background: -moz-linear-gradient(top, #222, #111);
	background: -o-linear-gradient(#222, #111);
	
	border: 1px solid #000;
	margin: 0 0 10px 0;
	width: 300px;
	
	color: #888; font-size: 11px; font-family: Tahoma;
		
	-webkit-box-shadow: 0 0 7px #969490;
	-moz-box-shadow: 0 0 7px #969490;
	-o-box-shadow: 0 0 7px #969490;
	box-shadow: 0 0 7px #969490;
	
	-webkit-text-shadow: 0 1px 0 #000;
	-moz-text-shadow: 0 1px 0 #000;
	-o-text-shadow: 0 1px 0 #000;
	text-shadow: 0 1px 0 #000;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;	
}

div.message-box {
	border-top: 1px solid #666;
	padding: 10px;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}

div.message-box div.message-header {
	color: #61cd07; font-weight: bold; font-size: 11px;
	margin: 0 0 10px 0;
}

div.message-box a.message-close {
	background: #000 url('../images/message-close.png') center no-repeat;
	width: 15px; height: 15px;
	display: block; float: right;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	
	-webkit-opacity: .2;
	-moz-opacity: .2;
	-o-opacity: .2;
	opacity: .2;
}

div.message-box:hover a.message-close {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

div.message-box div.message-body {
	overflow: hidden;
}

div.message-box div.message-body div.thumb {
	width: 48px;
	height: 48px;
	margin: 0 10px 0 0;
	float: left;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

div.message-box div.message-body div.thumb img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

Теперь открываем браузер и радуемся результату, но это еще не все, осталось оживить все это дело.

Шаг третий. Оживление на jQuery

И так, со стороны jQuery нам нужно сделать плагин для простого способа создавать уведомления и манипулирования ими. Плагин будет находить контейнер стека уведомлений, если не найдет тогда создаст, затем будем собирать верстку контейнера уведомления с переданными данными. Получившийся результат будет вставляться в стек уведомлений.

(function($) {
	$.jnotify = function(title, text, pictureSrc, options) {
		var stackContainer, messageWrap, messageBox, messageBody, messageTextBox, closeButton, messagePicture, image;

		options = $.extend({
			lifeTime: 0,
			click: undefined
		}, options);
		
		// находим контейнер с сообщениями, если его нет, тогда создаём
		stackContainer = $('#notifier-box');
		if (!stackContainer.length) {
			stackContainer = $('<div>', {id: 'notifier-box'}).prependTo(document.body);
		}

		// создаём элементы вертски контейнера сообщения
		messageWrap = $('<div>', {
			className: 'message-wrap',
			css: {
				display: 'none'
			}
		});

		messageBox = $('<div>', {
			className: 'message-box'
		});

		messageHeader = $('<div>', {
			className: 'message-header',
			text: title
		});

		messageBody = $('<div>', {
			className: 'message-body'
		});

		messageTextBox = $('<span>', {
			text: text
		});
		
		closeButton = $('<a>', {
			className: 'message-close',
			href: '#',
			title: 'Закрыть уведомление',
			click: function() {
				$(this).parent().parent().fadeOut(300, function() {
					$(this).remove();
				});
			}
		});

		// если указан путь к картинке, тогда создадим контейнер и для неё :)
		if (pictureSrc != undefined) {
			messagePicture = $('<div>', {
				className: 'thumb'
			});
			image = $('<img>', {
				src: pictureSrc
			});
		}

		// теперь расположим все на свои места
		messageWrap.appendTo(stackContainer).fadeIn();
		messageBox.appendTo(messageWrap);
		closeButton.appendTo(messageBox);
		messageHeader.appendTo(messageBox);
		messageBody.appendTo(messageBox);

		if (messagePicture != undefined) {
			messagePicture.appendTo(messageBody);
			image.appendTo(messagePicture);
		}
		messageTextBox.appendTo(messageBody);

		// если время жизни уведомления больше 0, ставим таймер
		if (options.lifeTime > 0) {
			setTimeout(function() {
				$(messageWrap).fadeOut(300, function() {
					$(this).remove();
				});
			}, options.lifeTime);
		}
		
		// если установлен колбек
		if (options.click != undefined) {
			messageWrap.click(function(e) {
				if (!jQuery(e.target).is('.message-close')) {
					options.click.call(this);
				}
			});
		}
		
		return this;
	}
})(jQuery);

Ну вот теперь у нас есть готовый код, для добавления уведомлений на вашем сайте. Как видите по коду я добавил еще возможность привязать колбек на клик по уведомлению. Данный колбек может быть пригодным, например если необходимо открыть новую вкладку в браузере или редиректить, когда пользователь кликает на уведомление.

Шаг четвертый. Подготовка к работе

Теперь у нас есть всё для полной работоспособности уведомлений. Осталось накинуть пробный исходник HTML кода, чтобы для новичков в этом деле было понятно как запускать такое чудо. Собственно вот и сам код, с пояснительными комментариями:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Notification messages</title>

	<link href="css/base.css" rel="stylesheet" type="text/css" />
	
	<!-- Подключаем стили уведомлений -->
	<link href="css/jnotifier.css" rel="stylesheet" type="text/css" />
	
	<!-- Подключаем jQuery -->
	<script src="js/jquery.min.js" type="text/javascript"></script>
	
	<!-- Подключаем наш плагин -->
	<script src="js/jnotifier.jquery.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	function showMesssage() {
		// тут мы вызываем уведомление, без таймера и без колбека
		$.jnotify(
			'Сообщение от Василия Пупкина', 
			'Это просто обычный текст для проверки работы jQuery-плагина сообщений уведомлений. Кстати, знаете ли вы, что в Европе признано считать людей с ...',
			'image.png'
		);
	}
	</script>
</head>
<body>
	<!-- При клике показываем уведомление -->
	<a href="javascript:showMesssage();">Показать уведомление</a>
</body>
</html>

Собственно, на этом можно и закончить, надеюсь урок вам понравился. Подписывайтесь на RSS, ибо дальше статьи и уроки будут еще вкуснее и полезней :)