Сообщения для сайта с помощью jQuery и CSS3

msg-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>


<ul id="trigger-list">
 <li><a href="#" class="trigger info-trigger"  >Информация</a></li>
 <li><a href="#" class="trigger error-trigger">Ошибка</a></li>
 <li><a href="#" class="trigger warning-trigger">Предупреждение</a></li>
 <li><a href="#" class="trigger success-trigger">Успех</a></li>
</ul>

Как вы заметили, в демонстрации приводиться несколько разновидностей ошибок, а именно: информационное сообщение, сообщение об ошибке, предупреждение и сообщение об успешном выполнении действия.

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

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


#trigger-list
{
text-align: left;
margin: 50px 0;
padding: 0;
}

#trigger-list li
{
display: inline-block;
*display: inline;
zoom: 1;
}

#trigger-list .trigger{
background: #91bd09; url(alert-overlay.png) repeat-x;
display: inline-block; 
padding: 5px 10px 6px; 
color: #fff; 
text-decoration: none;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}

#trigger-list .trigger:hover
{
background-color: #749a02;
}

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

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

После того как с CSS мы разобрались-приступим к рассмотрению параметров 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);
          });

});

Оригинал урока: red-team-design.com

Урок для Вас подготовлен командой сайта www.red-star.pro.