Создаем выпадающие окна на jQuery

Для информирования посетителей сайта часто требуется динамично создать и показать окно сообщения. Что весьма притягивает взор посетителей, в данном уроке мы рассмотрим как создать простые выпадающие информационные блоки с помощью jQuery. Функциональность заключается в том, что можно легко разместить в этих окнах регистрационную форму, подписку на новости или какую-нибудь рекламу в качестве содержимого тэга div #box.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Первым шагом будет подключение скрипта между тегами <head></head>:

Теперь мы создаем разметку для информационного блога и кнопки:

<div align=center><a class="button" href="#">НАЖАТЬ ЗДЕСЬ</a></div>

</div>

<p><b>Ссылка не работает?!</b>Обратитесь к администратору.</p>

</div>

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

#box{

background:url('img/i11.png') repeat-x center top #5c7900;

height:115px;

padding:20px;

margin-top:-10px;

padding-top:30px;

width:400px;

border:1px solid #5c7900;

color:#fff;

text-shadow:1px 1px 0 #494848;

font-family:'Myriad Pro',Arial,Helvetica,sans-serif;

}

#box p{

font-size:25px;

background:url('img/warning.png') no-repeat 10px center;

padding-left:90px;

}

#box p b{

font-size:30px;

display:block;

}

#box,

#main,

a. button{

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

}

Теперь стилизируем кнопку, по нажатию на которую происходит выпадания информационного окна:

.button{

width: 600px;

margin: 0 auto;

}

.button, .button:visited{

background: #222 url(alert-overlay.png) repeat-x;

display: inline-block;

padding: 5px 10px 6px;

color: #fff;

text-decoration: none;

font-size:20px;

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

font-weight:bold;

cursor: pointer;

}

.button:hover { background-color: #111; color: #fff; }

.button:active { top: 1px; }

.button, .button:visited { background-color: #91bd09; }

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

Во второй части кода используется несколько правил CSS3 для кнопки, чтобы добиться вида полированной поверхности. Заметьте, что присутствуют два правила gradient, которые предназначены для браузеров Mozilla Firefox и Webkit (Safari и Chrome).

Полноценная кнопка CSS3 — Градиенты, скругленные углы и тень текста.

Последний шаг, это использование jQuery, Сначала создадим плагин bounceBox. Создание плагина jQuery — это вопрос расширения объекта $.fn новой функцией. ‘this’:

(function($){

/* Плагин добавляет к ядру jQuery Core четыре метода */

/* Преобразование элемента в выпадающее окно: */

$.fn.bounceBox = function(){

this.css({

top: -this.outerHeight(),

marginLeft : -this.outerWidth()/2,

position : 'fixed',

left: '50%'

});

return this;

}

/* Метод boxShow */

$.fn.bounceBoxShow = function(){

/* Запуск анимации выпадения окна */

this.stop().animate({top:0},{easing:'easeOutBounce'});

this.data('bounceShown',true);

return this;

}

/* Метод boxHide */

$.fn.bounceBoxHide = function(){

/* Запуск анимации поднимания окна */

this.stop().animate({top:-this.outerHeight()});

this.data('bounceShown',false);

return this;

}

/* Метод boxToggle */

$.fn.bounceBoxToggle = function(){

if(this.data('bounceShown'))

this.bounceBoxHide();

else

this.bounceBoxShow();

return this;}

})(jQuery);

На заметку, мы определяем четыре раздельных метода, которые преобразуют тэг div в bounceBox (и применяют правила CSS для позиционирования), показывает его, скрывает его или переключает состояния с использованием метода jQuery animate().

$(document).ready(function(){

/* Конвертируем тэг div #box в bounceBox: */

$('#box').bounceBox();

/* При поступлении события нажатия кнопки мыши на переключаем выпадающее окно: */

$('a.button').click(function(e){

$('#box').bounceBoxToggle();

e.preventDefault();

});

/* Если в области выпадающего окна была нажата кнопка мыши, то открываем окно: */

$('#box').click(function(){

$('#box').bounceBoxHide();

});

В данном коде первым, что мы сделаем — конвертируем тэг div #box в bounceBox, и привязываем обработчик к событию нажатия кнопки мыши на большой графической кнопке на странице или в выпадающем окне.