Автор

10 06.2013
Сообщения для сайта с помощью 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);
          });

});

 

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


vk.com/club.ssdru

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


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

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

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


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

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


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

В данном уроке мы создадим интересные визуальные 3D эффекты с помощью CSS3 и jQuery. Идея для урока возникла под впечатлением страниц демонстрации проектов Google SketchUp.

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D. В тексте урока префиксы браузеров опущены для большей наглядности. Полный код можно посмотреть в исходниках к уроку.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close