Автор

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

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


 

Порой для при манипуляции каких-нибудь действий на сайте требуется вывод сообщений различного рода, например о возникшей ошибке, или удачном выполнении определенного действия пользователем. Данные информационные сообщения отыгрывают весомую роль в деятельности посетителя, так как несут информационную роль когда пользователь выполняет важную информацию. В данном уроке мы рассмотрим как создать сообщения для пользователя с использованием 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>

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

Далее мы рассмотрим стилизацию ошибок, а именно выполнение анимированных диагональных полосок, следует заметить, что данный эффект будет доступен только для браузеров 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;
    }
}

Данные сообщения изначально спрятаны, Для этого будет использоваться фиксированное позиционирование (значение 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);
          });

});

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

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

Удобный фрагмент, позволяющий пользователям настраивать продукт непосредственно из галереи продуктов и добавлять его в корзину.


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

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


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

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


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

На некоторых сайтах вы, наверное, не разе замечали так называемые «Хлебные крошки», которые сохраняют путь пройденного вами пути на сайте. Это достаточно удобно, ведь позволяет быстро вернуться в необходимый раздел сайта. Но зачастую такие крошки достаточно не приметные, и пользователь не обращает на них внимание, при этот данный элемент на сайте теряет свою значимость. В данном уроке мы рассмотрим как стилизовать данные следы на сайте, чтобы они отлично привлекали взор посетителя и при этом выполняли свое задание.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close