Здравствуйте, уважаемые читатели блога LifeExample, предлагаю вам продолжить наше знакомство с библиотекой jQuery и написать первый серьезный скрипт с использованием этого инструмента: "Всплывающее окно jQuery". В задачи скрипта будет входить вывод на страницу сайта информационного окна, в котором можно разместить все что угодно: от приветствия и поздравления с майскими праздниками, до рекламного баннера партнера.
Бороздя просторы глобальной паутины, я думаю, вы не раз сталкивались с подобными всплывающими окнами. Не смотря на то, что у пользователей приходящих на ваш сайт уже данным давно выработался инстинкт: "Вижу всплывающее окно — сразу закрываю!", нам все равно может пригодиться данный скрипт. А по этому, не медленно приступим к его разработке.
Подготавливаем окно к всплытию.
Прежде чем углубляться в процесс реализации скрипта, нам необходимо создать наше всплывающее окошко, пока без анимации. Для этого создайте два файла windowstyle.css и window.html, а также нам потребуется директория для хранения картинок images. Скачайте свежую библиотеку jQuery и поместите её в одной папке со скриптом. Если вы не знаете, как это сделать, читайте статью посвященную знакомству с библиотекой jQuery.
Файлы скрипта всплывающего окна
После того как все необходимые файлы созданы можно заняться их наполнением. Для того чтобы наше окошко выглядело модно и красиво, нам потребуется набор картинок формирующий целостный вид окна (ниже — ссылка для скачивания).
Файл стилей windowstyle.css мы не будем рассматривать подробно, т.к. он очень большой и не обладает правом тратить наше время. Просто скачайте его вместе с необходимым набором картинок.
Набор картинок для всплывающего окна + windowstyle.css ( Скачали: 644 чел. )
Перенесем картинки из содержимого архива в папку images, а также заменим наш windowstyle.css и продолжим подготовку. Для завершения церемонии приготовления, нам остается создать HTML код будущего всплывающего окна.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script type="text/javascript" src="/jquery-1.7.2.js"></script>
<link rel="stylesheet" href="/windowstyle.css" />
</head>
<body>
<h1>Контент страницы</h1>
<div id="pop-up-window"><!--Окно-->
<div id="windowHeader"><!--Верхняя часть окна-->
<div id="windowTitle">Всплывающее окно jQuery</div><!--Заголовок окна-->
<img src="/images/window_close.jpg" id="btnClose" /><!--Кнопка закрыть-->
</div>
<div id="showWindow">Показать всплывающее окно</div>
</body>
</html>
Теперь я обращу ваше внимание на смысл написанного выше кода. Первым делом мы создаем блок pop-up-window, как не сложно догадаться из названия он будет играть роль всплывающего окна и содержать все его детали. Затем мы разделяем его на четыре части блоками: windowHeader, windowRightSide, windowLeftSide, windowTitle. Каждый, из которых содержит в себе одну из составляющих картинок окна из папки images. Кроме интерфейса, некоторые из данных блоков содержат в себе информацию, такую как заголовок окна, и кнопку для закрытия. Также мы создали блок windowContent — выводящий содержимое окна, в данном примере выводится логотип моего блога и ссылка для подписки на обновления статей. В реальности туда можно поместить все, что угодно.
Итак, уважаемые читатели, поздравляю, подготовительная часть закончена, и мы можем перейти к назначению данной статьи, а именно к написанию скрипта.
Пишем скрипт "всплывающее окно jQuery"
На этом этапе мы имеем уже сформированное окно, которое в первую очередь нужно скрыть, а в последствии, при нажатии на блок showWindow оно должно плавно отобразиться.
Заготовок всплывающего окна
Следующий кусочек кода как это ни странно уже делает львиную долю функционала:
<script>
$(document).ready(function(){
var pop_window = $('#pop-up-window');
pop_window.hide();
$('#showWindow').click(function(){
pop_window.show(1000);
});
$('#btnClose').click(function(){
pop_window.hide(1000);
});
});
</script>
Если вы вставите его в windows.html, то уже на этом этапе можете проверить функциональность всплывающего блока pop-up-window. Не смотря на тривиальность кода, всё-таки стоит объяснить, алгоритм:
После того как DOM сформировался, получаем содержимое блока pop-up-window и скрываем его.
Если произошло нажатие на блок showWindow, запускаем событие show(1000) для блока pop-up-window, означающее выполнение действия показа с задержкой 1000 миллисекунд.
При нажатии на кнопку закрытия окошка, отрабатывает противоположное событие window.hide(1000) скрывающее блок pop-up-window из вида.
Cкриншот срипта
Собственно на этом можно и закончить, но это было бы слишком просто. Для того, чтобы по практиковаться с jQuery я предлагаю сделать несколько эффектов:
Выравнивание блока pop-up-window по центру браузера;
Выпадение окна из-за границы браузера;
Поочередное открытие и закрытие окна при нажатии на блок showWindow;
Всплытие окна по таймеру;
Выравнивание блока по центру браузера
Чтобы выровнять DIV по центру браузера, без jQuery не обойтись, но это и не страшно, ведь с помощью этой замечательной библиотеки мы двумя строчками сможем выровнять наше всплывающее окно по центру. Все что нам требуется это прописать до вызова:
1
pop_window.hide();
вот эти две строки:
1
2
pop_window.css('left', ($(window).width()-pop_window.width())/2+ 'px');
pop_window.css('top', ($(window).height()-pop_window.height())/2+ 'px');
Тут арифметика простая: вычисляем длину окна браузера, отнимаем от нее длину нашего блока pop-up-window, делим все это пополам, и получаем центровую координату ‘X’ для левого верхнего угла блока. Аналогичную операцию делаем в вертикальном направлении, и получаем координату ‘Y’.
Выпадение окна из-за границы браузера
Эффект заключается в том, что при нажатии на кнопку, наш блок как бы вываливается из-за пределов страницы, и фиксируется в центре экрана.
Следующий скрипт осуществляет задуманное:
<script>
$(document).ready(function(){
var pop_window = $('#pop-up-window');
var X = ($(window).width()-pop_window.width())/2;
var Y = ($(window).height()-pop_window.height())/2;
pop_window.css('left', X+ 'px');
pop_window.css('top', Y+ 'px');
pop_window.hide();
$('#showWindow').click(function(){
pop_window.css('display', 'block');
pop_window.css('top', -pop_window.height() + 'px');
pop_window.animate({top:Y});
});
$('#btnClose').click(function(){
pop_window.hide(1000);
});
});
</script>
Блоку присваиваются координаты за верхней границей браузера. Потом применяется jQuery событие — animate({top:Y}), которое плавно доводит наше всплывающее окно до координаты Y (середины страницы). Чтобы сделать движение более мягким можно использовать параметр "slow"
1
pop_window.animate({top:Y},"slow");
Поочередное появление и исчезновение окна при нажатии на блок showWindow
Попробуем сделать так, чтобы после того как окно уже показано на экране, при повторном нажатии на блок showWindow выполнялся процесс противоположный предыдущему. Т.е. окно должно плавно уходить за пределы страницы. Реализовать это нам может помочь событие slideToggle("slow"), достаточно заменить на него уже используемое нами событие show(1000) и все заработает.
Но ведь мы хотим попрактиковаться и создать эксклюзивный велосипед в виде всплывающего окна jQuery, поэтому мы изобретем такой скрипт:
<script>
$(document).ready(function(){
var pop_window = $('#pop-up-window');
var X = ($(window).width()-pop_window.width())/2;
var Y = ($(window).height()-pop_window.height())/2;
pop_window.css('left', X+ 'px');
pop_window.css('top', Y+ 'px');
pop_window.hide();
var visible_window=false;
$('#showWindow').click(function(){
if(!visible_window){
pop_window.css('display', 'block');
pop_window.css('top', -pop_window.height() + 'px');
pop_window.animate({top:Y},"slow");
visible_window=true;
}
else{
pop_window.css('display', 'block');
pop_window.animate({top:-pop_window.height()},"slow");
visible_window=false;
}
});
$('#btnClose').click(function(){
pop_window.hide(1000);
});
});
</script>
Как видите мало чего изменилось, что говорит о том что пользоваться jQuery — одно удовольствие. Нет, не то что бы я расхваливаю эту библиотеку, но я явно в восторге от того, что мне не приходится самостоятельно создавать JavaScript функции и продумывать логику работы.
Всплытие окна по таймеру
Ну и заключительной вехой программирования скрипта, предлагаю переделать его таким образом чтобы пользователю ничего не пришлось нажимать, а просто при заходе на страницу, спустя заданный отрезок времени, окно самопроизвольно представлялось перед посетителем.
Тут я не нашел ничего лучшего чем использование стандартной JavaScript функции для задания интервала на выполнения setTimeout():
setTimeout(function(){
if(!visible_window){
pop_window.css('display', 'block');
pop_window.css('top', -pop_window.height() + 'px');
pop_window.animate({top:Y},"slow");
visible_window=true;
}
else{
pop_window.css('display', 'block');
pop_window.animate({top:-pop_window.height()},"slow");
visible_window=false;
}
}
, 2000);
Скачать завершенную версию скрипта созданного в данной статье я предлагаю вам по ссылке:
Скачать Всплывающее окно jQuery ( Скачали: 1475 чел. )
Ну вот мы и закончили, первый скрипт с использование jQuery библиотеки, надеюсь вы получили базовый опыт для дальнейшей работы. Если что-то осталось не понятным, не стесняйтесь спрашивайте, разберемся вместе.
