Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Всплывающие уведомления Категория: jQuery
Название: Всплывающие уведомления
Дата добавления: 09-06-2012
Раз просмотрено: 876
Комментарии: 0
Рейтинг: * * * * * * * * * * (1 голос)

Всплывающие уведомления

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

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

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

Типы уведомлений

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

HTML

Вот разметка, необходимая для создания этих всплывающих уведомлений. Фактически, все четыре вам вряд ли будут необходимы. Оставьте только те, которые вы планируете вывести на вашей странице. Каждое уведомление находится в блоке с классом message. Информационное уведомление, уведомление об успехе, предупреждающее уведомление и уведомление об ошибке имеют соответственно классы: info, success, warning и error:

<div class="info message">
  <h3>Информационное уведомление</h3>
  <p>Это просто информационное сообщение. Его цель — сообщать пользователю о чем-то.</p>
</div>

<div class="success message">
  <h3>Уведомление об успехе</h3>
  <p>Это просто уведомление об успехе. Его цель — сообщать пользователю об успешном выполнении действия.</p>
</div>

<div class="error message">
  <h3>Уведомление об ошибке</h3>
  <p>Это просто уведомление об ошибке. Его цель — сообщать пользователю о неудачном выполнении действия.</p>
</div>

<div class="warning message">
  <h3>Предупреждающее уведомление</h3>
  <p>Это просто предупреждающее уведомление. Его цель — предупреждать пользователя, что его действия могут привести к ошибке.</p>
</div>

CSS

Теперь добавьте эти стили к ваше странице с всплывающими уведомлениями. Помните, что мы используем в них продвинутые CSS3 свойства, такие как градиенты и анимация. Поэтому работать так, как было задумано, эти уведомления будут только в современных браузерах, в старых некоторые элементы дизайна пропадут:

body {
	margin: 0;
}

.message {
	-webkit-background-size: 40px 40px;
	-moz-background-size: 40px 40px;
	background-size: 40px 40px;
	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: 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;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	-webkit-animation: animate-bg 5s linear infinite;
	-moz-animation: animate-bg 5s linear infinite;
	font-family: sans-serif;
}

.message, .message * {
	cursor: pointer;
}
.message h3 {
	margin: 0 0 5px 0;
	font-size: 16px;
}
.message p {
	margin: 0;
	font-size: 12px;
}

.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;
}


@-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;
	}
}

jQuery

Теперь, для работы наших сообщений, подключите 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]);
	}
}

// Функции, показывающие сообщения:
function showMessage(type) {
	$('.' + type + '-trigger').click(function() {
		hideAllMessages();
		$('.' + type).animate({top:'0'}, 500);
	});
}
function loadMessage(type) {
	hideAllMessages();
	$('.' + type).animate({top:'0'}, 500);
}

$(document).ready(function() {
	hideAllMessages();

	for(var i = 0; i < myMessages.length; i++) {
		showMessage(myMessages[i]);
	}

	$('.message').click(function() {
		$(this).animate({top: -$(this).outerHeight()}, 500);
	});	 
});

Для запуска сообщений при нажатии на кнопку или ссылку, они должны иметь один из следующих классов: info-trigger для информационного уведомления, success-trigger для уведомления об успехе, warning-trigger для предупреждающего уведомления и error-trigger для уведомления об ошибке.

Также, вы можете автоматически вызывать уведомления при загрузке страницы с помощью функции loadMessage, которой вы передаете тип сообщения (info, success, warning или error). Например этот код вызовет ваше информационное уведомление:

loadMessage('info');

Это интересно: «Вендорные префиксы — добро или зло?».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.