Создаем выпадающие окна на jQuery
Для информирования посетителей сайта часто требуется динамично создать и показать окно сообщения. Что весьма притягивает взор посетителей, в данном уроке мы рассмотрим как создать простые выпадающие информационные блоки с помощью jQuery. Функциональность заключается в том, что можно легко разместить в этих окнах регистрационную форму, подписку на новости или какую-нибудь рекламу в качестве содержимого тэга div #box.
Первым шагом будет подключение скрипта между тегами <head></head>:
1 2 3 4 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="bouncebox_plugin/jquery.easing.1.3.js"></script> <script type="text/javascript" src="bouncebox_plugin/jquery.bouncebox.1.0.js"></script> <script type="text/javascript" src="script.js"></script> |
Теперь мы создаем разметку для информационного блога и кнопки:
1 2 3 4 5 6 |
<div id="main"> <div align=center><a class="button" href="#">НАЖАТЬ ЗДЕСЬ</a></div> </div> <div id="box"> <p><b>Ссылка не работает?!</b>Обратитесь к администратору.</p> </div> |
Рассмотрим стилизацию с помощью CSS. Плагин, который рассматривается в данном уроке, добавляет свои собственные правила CSS для позиционирования окна сообщения, чтобы добиться эфекта выпадения, но нам все еще нужно закодировать дизайн окна в файле стилей.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#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; } |
Теперь стилизируем кнопку, по нажатию на которую происходит выпадания информационного окна:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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’:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
(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().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(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, и привязываем обработчик к событию нажатия кнопки мыши на большой графической кнопке на странице или в выпадающем окне.
Читайте также:
Опубликовал Cooper 21.09.2011 в 02:55, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |