Сообщение (уведомление) на CSS3 и jQuery

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

В этой статье вы узнаете, как создать важное сообщение (уведомление) при помощи CSS3 и jQuery.

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

Ниже приведены заголовки уведомлений:

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

Информация

Цель: проинформировать пользователя по соответствующему вопросу.

Ошибка

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

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

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

Успех

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

HTML

<div class="info message">
 <h3>FYI, something just happened!</h3>
 <p>This is just an info notification message.</p>
</div>

<div class="error message">
 <h3>Ups, an error ocurred</h3>
 <p>This is just an error notification message.</p>
</div>

<div class="warning message">
 <h3>Wait, I must warn you!</h3>
 <p>This is just a warning notification message.</p>
</div>

<div class="success message">
 <h3>Congrats, you did it!</h3>
 <p>This is just a success notification message.</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 браузеры, например, Chrome/Safari или Mozilla 5+.

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

HTML

    position: fixed;
     _position: absolute; /* IE6 only */

jQuery

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

JQuery

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

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

JQuery

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 работает следующим образом: когда страница загружена скрываем все сообщения, затем по клику открываем соответствующее сообщение.

JQuery

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

JQuery

$(document).ready(function(){

// Изначально скрываем все
hideAllMessages();

// Показываем сообщение
for(var i=0;i<myMessages.length;i++)
{
       showMessage(myMessages[i]);
}

// По клику скрываем сообщение
$('.message').click(function(){
  $(this).animate({top: -$(this).outerHeight()}, 500);
 });

});

Заключение

C помощью css3 можно спроектировать бесконечное количество сообщений (уведомлений). Выше показан лишь небольшой пример, в котором для простоты мы не используем изображения.

Но дизайн еще не все, в нашем примере не последнюю роль играют интерактивность и функциональность.

Источник