Софкейз

В прошлый раз я писал как создать небольшой плагин показывающий сообщения-подсказки в стеке на jQuery. Теперь я расскажу как сделать подобный плагин, но только сообщения уже будут не в стеке и не углу сайта! Этот плагин я назвал jboxmessage , название похоже на предыдущий плагин, но все же суть отличается.

Начнем также, как и в прошлом уроке, начнем с CSS:

.boxmessage
{
	position: fixed;
	left: 0; right: 0;

	background: #333;
	border-bottom: 1px solid #666;
	padding: 25px;
	cursor: pointer;

	color: #999; font-family: Tahoma; font-size: 13px;
}
.boxmessage h3
{
	color: #fff; font-size: 17px; font-weight: normal;
	margin: 0 0 10px 0; padding: 0;
}
.error
{
	background: rgba(125, 0, 0, .5);
	color: #fff;
}

Приступаем ко второму шагу, к HTML разметке, давайте сразу создадим файл плагина и подключим его вместе с jQuery, а также добавим в HTML обработку событий для показа сообщений:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jBoxMessage</title>

	<link href="base.css" rel="stylesheet" type="text/css" />
	<link href="jboxmessage.css" rel="stylesheet" type="text/css" />

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="jquery.jboxmessage.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document.body).ready(function()
	{
		$('#show').click(function() { $.jboxmessage('Тестовое сообщение', 'Это просто тестовое сообщение', 'top') });
		$('#show_error').click(function() { $.jboxmessage('Ой, какая досада', 'Что-то пошло не так, как следовало :(', 'bottom', 'error') });
	});
	</script>
</head>
<body>

	<a href="javascript:;" id="show">show message</a>
	<a href="javascript:;" id="show_error">show error message</a>

</body>
</html>

Остался последней шаг, код нашего плагина, приступаем к нему:

$.jboxmessage = function(header, content, position, class_name)
{
	// create box of message
	var boxmessage = $('<div class="boxmessage ' + class_name + '"><h3>' + header + '</h3>' + content + '</div>');

	// set position
	if(position == 'top')
	{
		$(boxmessage).css('top', 0);
	}
	else
	{
		$(boxmessage).css('bottom', 0);
	}

	// close on click
	$(boxmessage).click(function()
	{
		$(this).animate({opacity: 0}, 500, function()
		{
			$(this).remove();
		});
	});

	// show message
	$(boxmessage).css('opacity', 0).prependTo(document.body).animate({opacity: 1}, 500);
};

На этом все. Метод плагина принимает в себя четыре параметра, заголовок сообщения, текст сообщения, позицию отображения(верх или низ сайта), а также четвертый не обязательный параметр, — кастомный класс, определяющий стили для уникальных сообщений.