16.11.13, 11:12
0 комментарий
  Уроки

Сообщения для сайта [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]); //Выводим элемент из окна просмотра
		 }
}



Документ:php

Функция 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);
          });

});

СКАЧАТЬ

Вес файла
4.09 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204