Формирование сообщений с использованием CSS3 и jQuery

В наши дни интерфейс пользователя является решающим фактором, определяющим успех продукта или системы. Чтобы осчастливить посетителя, разработчики прилагают титанические усилия для формирования великолепного функционала и интерактивности дизайна.

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

В данном уроке мы создадим отличные сообщения с помощью CSS3 и jQuery.

 

Типы сообщений

Ниже приводится список распространенных типов сообщений:

  • Информация
  • Ошибка
  • Предупреждение
  • Успех

Информация

Назначение данного типа сообщений - информировать пользователя в соответствующем стиле.

Ошибка

Когда операция прерывается ошибкой, пользователь должен знать об этом. Пример таких сообщений: “Данные не могут быть удалены.” или “Ваши установки не сохранились” и так далее.

Предупреждение

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

Успех

Успешное завершение операции должно сопровождаться соответствующим сообщением.

 

Код HTML

<div class="info message">
		 <h3>Примите к сведению!</h3>
		 <p>Простое информационное сообщение.</p>
</div>

<div class="error message">
		 <h3>Ой, произошла ошибка!</h3>
		 <p>Пример сообщения об ошибке.</p>

</div>

<div class="warning message">
		 <h3>Предупреждение (последнее китайское)!</h3>
		 <p>Тип сообщения с предупреждением.</p>
</div>

<div class="success message">
		 <h3>Поздравляю!</h3>
		 <p>Сообщение об успешном завершении операции.</p>

</div>

 

CSS

.message
{
                -webkit-background-size: 40px 40px;
                -moz-background-size: 40px 40px;
                background-size: 40px 40px;
                background-image: -webkit-gradient(linear, left top, right bottom,
                                                        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                                                        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                                                        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                                                        to(transparent));
                background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
                 -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
                 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
                 width: 100%;
                 border: 1px solid;
                 color: #fff;
                 padding: 15px;
                 position: fixed;
                 _position: absolute;
                 text-shadow: 0 1px 0 rgba(0,0,0,.5);
                 -webkit-animation: animate-bg 5s linear infinite;
                 -moz-animation: animate-bg 5s linear infinite;
}

.info
{
                 background-color: #4ea5cd;
                 border-color: #3b8eb5;
}

.error
{
                 background-color: #de4343;
                 border-color: #c43d3d;
}

.warning
{
                 background-color: #eaaf51;
                 border-color: #d99a36;
}

.success
{
                 background-color: #61b832;
                 border-color: #55a12c;
}

.message h3
{
                 margin: 0 0 5px 0;
}

.message p
{
                 margin: 0;
}

@-webkit-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

@-moz-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

Обратите внимание на свойство animate-bg, которое анимирует фоновые диагональные полоски. Эффект будет виден только в браузерах семейства Webkit или Mozilla 5+.

Сообщения изначально скрыты. Для этого используется фиксированное позиционирование (значение absolute используется только для IE6, так как он не поддерживает position:fixed ).

position: fixed;
     _position: absolute; /* только для IE6 */

 

jQuery

Определяем массив с типами сообщений:

var myMessages = ['info','warning','error','success'];

Следующая функция скрывает сообщение. Сообщения могут иметь высоту, которая будет изменяться динамически. Поэтому высота сообщений вычисляется, чтобы скрывать сообщения корректно.

function hideAllMessages()
{
		 var messagesHeights = new Array(); // В данном массиве хранится высота для каждого сообщения
	 
		 for (i=0; i<myMessages.length; i++)
		 {
				  messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
				  $('.' + myMessages[i]).css('top', -messagesHeights[i]); //Выводим элемент из окна просмотра
		 }
}

Функция showMessage вызывается, когда документ готов.

function showMessage(type)
{
	$('.'+ type +'-trigger').click(function(){
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
	});
}

После загрузки мы скрываем все сообщения: hideAllMessages(). Затем для каждого триггера выводим соответствующее сообщение :

$(document).ready(function(){
		 
		 // Изначально скрываем все
		 hideAllMessages();
		 
		 // Выводим сообщение
		 for(var i=0;i<myMessages.length;i++)
		 {
			showMessage(myMessages[i]);
		 }
		 
		 // Когда пользователь нажимает на сообщение, скрываем его
		 $('.message').click(function(){			  
				  $(this).animate({top: -$(this).outerHeight()}, 500);
		  });		 
		 
});   

 

Готово!

Использование CSS3 открывает бесконечные перспективы для дизайна сообщений. Выше приведенный пример является одним из простых вариантов (без использования изображений).

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Y5VZrA2a3nk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Формирование сообщений с использованием CSS3 и jQuery | | 2012-06-19 11:59:50 | | Статьи Web-мастеру | | В наши дни интерфейс пользователя является решающим фактором, определяющим успех продукта или системы. Чтобы осчастливить посетителя, разработчики прилагают титанические усилия для формирования | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: