От автора: Одна из трудностей, оставшихся сегодня в веб-дизайне, это отображение всей избыточной информации на каждой странице. Например, формы регистрации. Что, если бы был способ сделать контент легкодоступным на каждой странице, но оставлять его скрытым до того, как он понадобится? Что ж, вы можете сделать такую верхнюю панель, которая при клике выдвигается и показывает свое содержимое. Но нам нужно сделать это еще и красиво, так что воспользуемся анимацией.
В этом учебнике мы создадим панель слайдера, которая выдвигается, показывая содержимое, с использованием JQuery для анимации высоты панели. В нашем примере мы создаем гипотетическую (предполагаемую) форму входа для новой области tutsplus, которая скоро появится.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг 1 – Разметка в Photoshop
Сначала нам нужно спланировать свою разметку и сделать ее красивой при помощи Photoshop. Спасибо Collis’у (имеется в виду веб-разработчик Collis Ta’eed) и его изумительному обращению с Photoshop за то, что у нас есть превосходная разметка, с которой уже можно работать.
Само собой разумеется, вы можете пользоваться PSD-файлами макетов исходной страницы и страницы с развернутой панелью-слайдером для более внимательного изучения. Эти файлы расположены в прилагаемом zip-архиве. У нас также нет никаких градиентов, так что мы должны довольно легко все сделать при помощи одного CSS.
Здесь вы можете видеть, как будет выглядеть демоверсия в своем обычном состоянии.
А вот так будет выглядеть демо-версия, когда панель скользнет вниз.
Шаг 2 – Проектирование структуры
Первым делом нам нужно выстроить структуру страницы. Какой структуры нам нужен HTML, чтобы создать вышеуказанную разметку, какой структуры нам нужен HTML?
Для начала, нам нужен заголовок, простирающийся на всю ширину страницы.
Также нам понадобится собственно верхняя панель, которая в настоящий момент постоянно раскрыта, пока мы не добавим обработку JQuery.
Нам понадобится область для содержимого страницы.
Наконец, нам будет нужен зрительный разрыв между заголовком и содержимым страницы, который мы выполним при помощи горизонтальной линии (hr).
Все в порядке, разметка страницы довольно простая. Вот она:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div></div> <!--Header--> <hr> <!--Header Stripe--> <div> <!--Contains the button and panel--> <div> <!--Contains the panel itself--> <div> This div will serve as the background of the panel</div> </div> <div><a>Login Here</a></div> <!--Will be the button to slide the panel down--> <div><a>Hide</a></div> <!--Toggles to this when the panel is slid down--> </div> </div> <div> All of the Content will go here </div> |
Круто…без классов и какого-либо содержимого внутри она выглядит как несколько бессмысленных div’ов, но позже все они понадобятся для CSS и JQuery. Теперь мы начнем добавлять классы, готовясь к использованию CSS.
Шаг 3 – Подготовка CSS: классы и ID
Теперь нам нужно сменить скелет на реальный сайт при помощи CSS. Мы начнем с добавления классов и ID ко всем этим div’ам! Это можно легко сделать, распечатав разметку Photoshop, а затем сделать разметку областей и связанных классов при помощи маркера. Для демонстрации я сделаю то же самое, только в Photoshop. Хотя он может быть чрезвычайно уродливым, будем надеяться, покажет вам разные области страницы.
Обратите внимание: я планирую сделать обычное изображение, неподсвечивающееся при проведении над ним мышью.
Вот страница с добавленными классами и ID:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="header"> </div> <hr id="header_stripe"/> <div id="wrapper"> <div id="toppanel"> <div id="panel"> <div id="panel_contents"> </div> </div> <div class="panel_button"><a href="#">Login Here</a></div> <div class="panel_button"><a href="#">Hide</a></div> </div> </div> <div id="content"> </div> |
Прямо сейчас я бы показал вам скриншот того, что мы имеем на данный момент, но у нас ничего нет, кроме горизонтальной линейки и двух ссылок с незаданными стилями. У вас есть общее представление. Теперь можно определять стили странице.
Шаг 4 – Сборка файлов
Прежде чем двигаться дальше, нам нужно добавить файл CSS в скелет. Я создал таблицу стилей, озаглавленную «style.css». Поскольку мы все равно добавляем код в заголовок, мы также добавим ссылки на javascript и jQuery. Вот заголовок страницы:
|
1 2 3 4 5 6 7 8 9 |
<head> <title>Nettuts JQuery Sliding Panel</title> <style type="text/css"> @import url(style.css); </style> <script src="jquery.js" type="text/javascript"></ <wbr> script> <script src="javascript.js" type="text/javascript"></<wbr>script> </head> |
Шаг 5 – Определяем стили для скелета: заголовок
Теперь нам нужно назначить стили скелету из div’ов. Давайте начнем сверху и будем двигаться вовнутрь. Сначала нам нужно назначить стили заголовку, а также тэгу body:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { background: #202020; text-align: center; margin: 0px; } #header { margin-left: auto; margin-right: auto; width: 100%; height: 135px; background: #3f3f3f url(images/header.png) no-repeat center ; position: relative; border-bottom: 1px solid #4a4a4a; } |
К счастью, здесь нет градиентов, о которых нужно беспокоиться. Но у нас все же есть фоновое изображение. Также я добавил рамку в 1px к низу заголовка для визуального разрыва.
Фоновое изображение не обязательно. Мне так понравился шрифт Bell Gothic BT, что я решил сделать надпись фоновым рисунком. В качестве альтернативы, вы можете просто определить стили для обычного текста, добавив свойства для тэгов h1 и h2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#header h1{ font-family: Arial, Helvetica, sans-serif; font-weight: bold; position: relative; top: 30px; font-size: 40px; color: white; } #header h2{ font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; color: #7e7e7e; } |
А теперь подправим заголовок (прим. перев. – в исходных текстах автора для этих стилей указан атрибут display:none, поэтому надписи h1 и h2 не отображаются поверх фонового рисунка).
|
1 2 3 4 5 6 |
<div id="header"> <h1>Sliding Panel</h1> <br /> <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2> </div> |
Так что теперь страница должна выглядеть так:
Шаг 5 можно посмотреть здесь.
Шаг 6 – Определяем стили горизонтальной линейке
Несмотря на то, что у нас есть нижняя рамка заголовка, чтобы визуально отделить секции, нам, кроме того, нужна плотная, более заметная рамка. Так как мы не можем применить к заголовку две нижних рамки, можно просто назначить стили горизонтальной линейке (hr):
|
1 2 3 4 5 6 7 8 9 |
hr#header_stripe{ height: 12px; position: relative; top: -7px; background-color: #191919; border: none; color: #191919; } |
Теперь у нас есть более разборчивый разделитель в придачу к рамке шириной 1px:
Шаг 6 можно посмотреть здесь.
Шаг 7 – Определяем стили панели
Теперь нам нужно назначить стили панели. Пока не добавлен JQuery, мы собираемся определить стили панели, когда она будет развернута. Когда мы закончим 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 32 33 34 35 36 37 |
#wrapper{ margin-left: auto; margin-right: auto; width: 900px; text-align: center; } #toppanel { position: absolute; top: 135px; width: 900px; z-index: 25; text-align: center; margin-left: auto; margin-right: auto; } #panel { width: 900px; position: relative; top: 1px; height: 400px; margin-left: auto; margin-right: auto; z-index: 10; overflow: hidden; text-align: left; } #panel_contents { background: black; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; height: 100%; width: 904px; position: absolute; z-index: -1; } |
Ok, вот немного кода для одного блока. Ну, это больше, чем ничего. Попробуйте проверить его при помощи Firefox Extension Firebug или Web Developer, и увидите все, что делает CSS.
Итак, проверим, как сейчас выглядит дизайн в Шаге 7.
Первым делом, нам нужно, чтобы расположение панели было выражено абсолютными координатами, иначе, когда она будет увеличиваться, то сдвинет весь контент дальше вниз. Так что мы добавляем обертку, в которую оборачиваем все, а затем центрируем. Если не использовать обертку, панель с абсолютными координатами будет нелегко отцентрировать.
Далее, мы добавляем данные о стилях для верхней панели в целом. Как вы можете видеть, сюда же включаются кнопки, расположенные на панели.
После этого мы добавляем данные о стилях панели, которая обычно скрыта. Это блок, который вы сейчас видите увеличенным. Я сделал его высоту 100%, так что если мы увеличиваем или уменьшаем высоту #toppanel, то высота #panel будет такой же.
К тому же, свойство overflow установлено на hidden, так что когда высота #toppanel уменьшается, она обрезает содержимое панели.
Если вы внимательно посмотрите на приведенный ранее HTML, то увидите div с ID panel_contents. Этот div, хотя и пустой, позволяет нам иметь прозрачный фон, в то время как контент остается внутри непрозрачного объекта.
Шаг 8 – Добавляем в панель содержимое
До проверки панели нам нужно добавить туда какой-нибудь контент, чтобы посмотреть, будет ли он должным образом скрываться. В этом примере мы делаем область регистрации, так что должны добавить форму, а также изображение, чтобы уравновесить его. Этот шаг – для того, чтобы просто создать содержимое для демонстрации. Это менее важно и более элементарно, так что я не буду объяснять так подробно, как все остальное. Вот код:
|
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 36 37 38 39 40 |
.border { border: 15px #1d1d1d solid; } img.border_pic { border: 15px #1d1d1d solid; position: absolute; top: 110px; float: left; margin-left: 150px; width: 250px; height: 150px; z-index: 30; } div#login { width: 240px; height: 150px; position: absolute; right: 150px; top: 110px; background: #46392f; text-align: left; padding-left: 10px; } div#login p { color: #CCCCCC; font-family: Century Gothic, Georgia, "Times New Roman", Times, serif; line-height: 25px; } div#login input#password { position: relative; right: -6px; } div#login input#login_btn { border: 1px #899690 solid; cursor: pointer; position: relative; top: 30px; left: 86px; } |
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" /> <div class="border" id="login"> <p>Username: <input type="text" size="15" name="username" id="username" /> <br /> Password: <input type="password" size="15" name="password" id="password" /> <br /> <input type="button" accesskey="l" id="login_btn" name="login" value="Login" /> </p> </div> |
Шаг 8 можно посмотреть здесь.
Шаг 9 — Тестируем CSS
Теперь, перед использованием jQuery для анимации высоты верхней панели нам нужно убедиться, что все работает гладко. Сейчас у нас уже есть содержимое, поэтому давайте изменим высоту #panel на 200px и посмотрим, что произойдет:
Прекрасно. Шаг 9 можно видеть здесь.
Теперь изменим ее на 0:
Безупречно. Теперь мы знаем, что при помощи JQuery наш замысел будет работать.
Шаг 10 – Определяем стили клавиши
Посмотрев на конечный продукт, вы увидите, что клавиша, которая сдвигает панель вниз, меняется, как только вы ее щелкаете. Значит, она переключается. На самом деле, нам нужны две клавиши, видимость которых мы будем переключать. Перед тем, как спрятать одну из них, мы должны для каждой определить CSS.
Если помните, мы определили для них класс «.panel_button». Вот содержание таблицы стилей. Я позже объясню:
|
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 |
.panel_button { margin-left: auto; margin-right: auto; position: relative; top: 1px; width: 173px; height: 54px; background: url(images/panel_button.png); z-index: 20; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity: 0.70; opacity: 0.70; cursor: pointer; } .panel_button a { text-decoration: none; color: #545454; font-size: 20px; font-weight: bold; position: relative; top: 5px; left: 10px; font-family: Arial, Helvetica, sans-serif; } .panel_button a:hover { color: #999999; } |
Шаг 10 – Клавиши панели
Сначала мы центрируем кнопку, используя технику auto margin. Затем мы позиционируем ее и добавляем фон клавиши. Мы также добавляем все необходимые стили, чтобы подогнать ее к требованиям любых браузеров. И делаем клавишу активной: когда вы проводите курсором над ней, курсор становится указателем. Это улучшает юзабилити.
Мы также собираемся обернуть текст в ссылку, чтобы обеспечить эффект on hover, а также регулировку положения.
Шаг 11 – HTML клавиши
Теперь, готовясь к использованию JQuery, мы должны настроить кнопки с помощью HTML.
Первым делом мы собираемся добавить к каждой кнопке изображение и расположить его при помощи CSS; вы это увидите далее в HTML:
|
1 2 3 4 5 |
.panel_button img{ position: relative; top: 10px; border: none; } |
Далее, нам еще нужно скрыть клавишу Hide. Насколько я ненавижу inline-стили, но думаю, как раз этот CSS легче встроить, так что вот получившийся код HTML для клавиш с изображениями:
|
1 2 3 4 5 6 7 8 |
<div class="panel_button" style="display: visible;"><img src="images/expand.png" alt="expand"/> <a href="#">Login Here</a> </div> <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" /> <a href="#">Hide</a> </div> |
Ok, обратите внимание, что прямо сейчас клавиша hide скрыта при помощи inline-стилей. Позже она будет переключаться при помощи jQuery. Заметьте, еще я добавил ID для второй клавиши, так что позже мы легко сможем выбрать ее в качестве цели.
Шаг 11 Клавиша панели
Шаг 12 – Добавляем контент
Это простой, но необходимый шаг – добавление контента. Я написал одно предложение и добавил абзац временного текста. Он отцентрирован с помощью auto margin, и окрашен в серый цвет:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#content { margin-left: auto; margin-right: auto; width: 600px; position: relative; top: 90px; text-align: left; color: #545454; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 30px; } |
Смотрите текст сзади панели в Шаге 12.
Шаг 13 – Время JQuery!
Ok, завершающий аккорд — JQuery! Возьмите самый последний JQuery на jQuery.com. Если вы новичок, и ищете великолепные упражнения по jQuery, не забудьте просмотреть другой учебник на Nettuts — Джеффри Уэя (Jeffrey Way). Я уже захватил копию с JQuery.com, и добавил ссылку на нее из HTML страницы на Шаге 4.
Шаг 14 – Думаем о том, что нам нужно
Давайте до того, как начать писать код, сначала подумаем, что мы хотим выполнять с помощью JQuery.
Мы хотим активировать анимацию при щелчке ‘div.panel_button’.
Затем нам нужно анимировать высоту панели до 400px.
Потом нам нужно переключать клавишу.
После того мы хотим активировать обратную анимацию при щелчке ‘div#hide_button’.
Далее нам нужно анимировать высоту обратно до 0px
Шаг 15 – Пишем код
Итак, первое, с чего мы начнем, приводя скрипт в готовность – со следующего JQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function() { }); Now we write the code that goes inside there: $(document).ready(function() { $("div.panel_button").click( <wbr> function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()<wbr>; }); $("div#hide_button").click(<wbr>function(){ $("div#panel").animate({ height: "0px" }); }); }); |
Панель в действии — в Шаге 15.
Во-первых, при рассмотрении предыдущего кода некоторых из вас могло заинтересовать, почему мы имеем переключатель только в первом обработчике. Ну, вам нужно помнить, что клавиша hide (скрыть) также имеет класс panel_button. Следовательно, клик на кнопку ‘Hide» в действительности применим к обоим обработчикам.
Шаг 16 – Делаем анимацию ‘реальной’
Итак, теперь все выглядит довольно приятно, но мы можем сделать еще больше, чтобы анимация выглядела получше. В процессе анимации важно постараться как можно больше подражать реальности. В данном случае я придумываю пример из реальной жизни, такой, как выдвигающийся проекционный экран. Помните, когда вы его вытаскиваете, то тянете несколько дальше, чем он должен быть, а потом он немного подается обратно. Аналогично, когда нужно поднять его обратно, вы немного тянете его вниз, после чего он очень быстро сворачивается.
Давайте попробуем это сымитировать:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function() { $("div.panel_button").click( <wbr> function(){ $("div#panel").animate({ height: "500px" }) .animate({ height: "400px" }, "fast"); $("div.panel_button").toggle()<wbr>; }); $("div#hide_button").click(<wbr>function(){ $("div#panel").animate({ height: "0px" }, "fast"); }); }); |
Обратите внимание, что мы анимируем панель до высоты 500 перед тем как она станет 400 высотой. Мы также добавили различие скоростей, как в жизни, сделав отдельные части более медленными. Если посмотреть на демоверсию, вы увидите, что при скрытии панели она сначала достигает 500. Снова это из-за того, что обе клавиши имеют один и тот же класс. Так что в реальности, когда вы скрываете панель, проходит следующий процесс:
Анимация до высоты 500 и переключение
Более быстрая анимация обратно до 400
Более быстрая анимация обратно до 0px
Теперь у нас есть работающая slider-панель, использующая JQuery. Надеюсь, вы нашли этот учебник полезным! Если да, пожалуйста, отправьте его на Digg, StumbleUpon, DZone, и т.д.!
Автор: Connor Zwick
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (10)