Плагин выпадающего информационного окна с использованием jQuery и CSS3 Для информирования посетителей сайта часто требуется динамично создать и показать окно сообщения. Обычно, процедура разрабтки такого информационного окна связана с поиском по репозиториям плагинов jQuery и воплощением решения с использованием альтернативы лайтбокса. Но я решил потратить время и разработал решение для единичного окна сообщения, и сегодня я представляю его Вам.
DEMO
DOWNLOAD
Шаг 1 – XHTML
Начнем с ответа на вопрос,что Вам нужно, чтобы создать такой эффект?
Единственное, что нужно - это создать тэг div на Вашей странице и разместить содержание внутри него. Например так:
Code
<div id="box">
<p><b>Заголовок!</b>Скучное описание.</p>
</div>
В данном примере заголовок сообщения, тело сообщения и иконка предупреждения создаются с использованием единственного тэга <p> и манипулированием с CSS. Иконка предупреждения - это фон, а заголовок сообщения обычный тэг bold, размещенный внутри параграфа.
Плагин BounceBox jQuery
Шаг 2 – CSS
Плагин, который рассматривается в данном уроке, добавляет свои собственные правила CSS для позиционирования окна сообщения, чтобы добиться эфекта выпадения, но нам все еще нужно закодировать дизайн окна в файле стилей.
styles.css – Часть 1
Code
/* Выпадающее окно */
#box{
background:url('img/box_bg.jpg') repeat-x center top #fcfcfc;
height:115px;
padding:20px;
margin-top:-10px;
padding-top:30px;
width:400px;
border:1px solid #fcfcfc;
color:#494848;
text-shadow:1px 1px 0 white;
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:52px;
display:block;
}
#box,
#main,
a.button{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
Здесь описывается дизайн bounceBox. Также присутствует пара правил, которые используются jQuery, с их помощью назначается ‘фиксированная’ позиция окна и центрирование по середине страницы, что требуется для анимации. Такой способ существует для разделения между стилями для дизайна и стилями для функционирования эффектов.
styles.css – Часть 2
Code
/* Дизайн большой кнопки */
a.button{
color:white;
letter-spacing:-2px;
padding:20px;
display:block;
text-shadow:1px 1px 0 #145982;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
font-size:80px;
font-weight:bold;
text-align:center;
width:350px;
border:1px solid #60b4e5;
margin:60px auto;
/*
Градиенты CSS3 для браузеров webkit и mozilla,
затухающие цвета для других браузеров:
*/
background-color: #59aada;
background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}
a.button:hover{
/* Более светлые градиенты для эффекта зависания */
text-decoration:none;
background-color: #5eb2e2;
background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}
Во второй части кода используется несколько правил CSS3 для кнопки, чтобы добиться вида полированной поверхности. Заметьте, что присутствуют два правила gradient, которые предназначены для браузеров Mozilla Firefox и Webkit (Safari и Chrome). К сожалению, в отличие от других правил CSS3, они не поддерживаются в рамках стандартного синтаксиса для отображения градиента, что создает некоторые трудности для разработчиков.
Также важно прописать затухающие цвета для случая, если браузер не поддерживает градиенты CSS.
Полноценная кнопка CSS3 - Градиенты, скругленные углы и тень текста
Шаг 3 – jQuery
Сначала создадим плагин bounceBox. Создание плагина jQuery - это вопрос расширения объекта $.fn новой функцией. ‘this’ новой функции эквивалентен набору элементов jQuery, который вызывает метод.
bouncebox-plugin/jquery.bouncebox.1.0.js
Code
(function($){
/* Плагин добавляет к ядру jQuery Core четыре метода */
/* Преобразование элемента в выпадающее окно: */
$.fn.bounceBox = function(){
/*
Применение некоторых правил CSS, которые центрируют элемент в середине страницы
и перемещают его выше области видимости браузера.
*/
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(){
/*
Показываем или скрываем bounceBox в зависимости от значения
переменной 'bounceShown'
*/
if(this.data('bounceShown'))
this.bounceBoxHide();
else
this.bounceBoxShow();
return this;
}
})(jQuery);
Мы определяем четыре раздельных метода, которые преобразуют тэг div в bounceBox (и применяют правила CSS для позиционирования), показывает его, скрывает его или переключает состояния с использованием метода jQuery animate()
Для переключения мы используем внутреннюю переменную, которая хранит состояние выпадающего окна.
Все описанные методы будут доступны после того, как Вы подключите библиотеку jQuery и файл jquery.bounce.1.0.js к странице. Для четкого эффекта выпадения Вам также будет нужен плагин jQuery easing, который включен в в директорию plugin в архивном файле.
Плагин использовать очень легко, в чем Вы сможете убедиться в приведенном ниже примере.
script.js
Code
$(document).ready(function(){
/* Конвертируем тэг div #box в bounceBox: */
$('#box').bounceBox();
/* При поступлении события нажатия кнопки мыши на переключаем выпадающее окно: */
$('a.button').click(function(e){
$('#box').bounceBoxToggle();
e.preventDefault();
});
/* Если в области выпадающего окна была нажата кнопка мыши, то открываем окно: */
$('#box').click(function(){
$('#box').bounceBoxHide();
});
});
Описанный выше код выполняется, когда происходит событие готовности документа, таким образом мы можем быть уверены, что все элементы страницы доступны для jQuery. Первое, что мы делаем - конвертируем тэг div #box в bounceBox, и привязываем обработчик к событию нажатия кнопки мыши на большой графической кнопке на странице или в выпадающем окне.
Вы можете разместить любой HTML код в тэге div и он будет корректно конвертрован в bounceBox. Также можно использовать несколько выпадающих окон на странице одновременно.
Плагин BounceBox готов!
Заключение
Вы можете использовать данный плагин jQuery чтобы представить пользователю сообщение в стиле "перехват взгляда". Можно легко разместить регистрационную форму, подписку на новости или какую-нибудь рекламу в качестве содержимого тэга div #box. Экспериментируйте и пишите о своих результаты в коментариях.
Не флудить!
Источник: ruseller.com
