Будуємо неймовірну форму реєстрації за допомогою jQuery

39

Від автора: Одна з труднощів, що залишилися сьогодні у веб-дизайні, це відображення всієї надлишкової інформації на кожній сторінці. Наприклад, форми реєстрації. Що, якби був спосіб зробити контент легкодоступним на кожній сторінці, але залишати його прихованим до того, як він знадобиться? Що ж, ви можете зробити таку верхню панель, яка при натисканні висувається і показує свій вміст. Але нам потрібно зробити, це ще й красиво, так що скористаємося анімацією.

У цьому підручнику ми створимо панель слайдера, яка висувається, показуючи вміст, з використанням JQuery для анімації висоти панелі. У нашому прикладі ми створюємо гіпотетичну (передбачувану) форму входу для нової області tutsplus, яка скоро з’явиться.

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Крок 1 – Розмітка в Photoshop

Спочатку нам потрібно спланувати свою розмітку і зробити її красивою за допомогою Photoshop. Спасибі Collis’у (мається на увазі веб-розробник Collis Ta’eed) і його дивовижному поводження з Photoshop за те, що у нас є чудова розмітка, з якої вже можна працювати.

Само собою зрозуміло, ви можете користуватися PSD файлами макетів вихідної сторінки та сторінки з розгорнутою панеллю-слайдером для більш уважного вивчення. Ці файли розташовані в доданому zip-архіві. У нас також немає ніяких градієнтів, так що ми повинні досить легко зробити за допомогою одного CSS.

Будуємо неймовірну форму реєстрації за допомогою jQuery

Тут ви можете бачити, як буде виглядати демоверсія у своєму звичайному стані.

Будуємо неймовірну форму реєстрації за допомогою jQuery

А ось так буде виглядати демо-версія, коли панель ковзне вниз.

Крок 2 – Проектування структури

Насамперед нам потрібно вибудувати структуру сторінки. Якої структури нам потрібен HTML, щоб створити вищезгадану розмітку, якої структури нам потрібен HTML?

Для початку, нам потрібен заголовок, що простирається на всю ширину сторінки.

Також нам знадобиться власне верхня панель, яка зараз постійно розкрито, поки ми не додамо обробку JQuery.

Нам знадобиться область вмісту сторінки.

Нарешті, нам буде потрібен зоровий розрив між заголовком і вміст сторінки, який ми виконаємо за допомогою горизонтальної лінії (hr).

Все в порядку, розмітка сторінки досить проста. Ось вона:

This div will serve as the background of the panel
Login Here
Hide
All of the Content will go here

Круто…без класів і будь-якого вмісту всередині вона виглядає як кілька безглуздих div ів, але пізніше всі вони знадобляться для CSS і JQuery. Тепер ми почнемо додавати класи, готуючись до використання CSS.

Крок 3 – Підготовка CSS: класи і ID

Тепер нам потрібно змінити скелет на реальний сайт за допомогою CSS. Ми почнемо з додавання класів і ID до всіх цих div » ам! Це можна легко зробити, роздрукувавши розмітку Photoshop, а потім зробити розмітку областей і пов’язаних класів за допомогою маркера. Для демонстрації я зроблю те ж саме, тільки в Photoshop. Хоча він може бути надзвичайно потворним, будемо сподіватися, покаже вам різні області сторінки.

Будуємо неймовірну форму реєстрації за допомогою jQuery

Зверніть увагу: я планую зробити звичайне зображення, неподсвечивающееся при проведенні над ним мишею.

Ось сторінка з доданими класами ID:

Login Here
Hide

Прямо зараз я б показав вам скріншот того, що ми маємо на даний момент, але у нас нічого немає, крім горизонтальної лінійки і двох посилань з незаданными стилями. У вас є загальне уявлення. Тепер можна визначати стилі сторінці.

Крок 4 – Збірка файлів

Перш ніж рухатися далі, нам потрібно додати файл CSS в скелет. Я створив таблицю стилів, озаглавлену «style.css. Оскільки ми все одно додаємо код в заголовок, ми також додамо посилання на javascript, jQuery. Ось заголовок сторінки:

Nettuts JQuery Sliding Panel
@import url(style.css);
</
script>

Крок 5 – Визначаємо стилі для скелета: заголовок

Тепер нам потрібно призначити стилі скелету з div ів. Давайте почнемо зверху і будемо рухатися усередину. Спочатку нам потрібно призначити стилі заголовку, а також тегу body:

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:

#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 не відображаються поверх фонового малюнка).

Так що тепер вона повинна виглядати так:

Крок 5 можна подивитися тут.

Будуємо неймовірну форму реєстрації за допомогою jQuery

Крок 6 – Визначаємо стилі горизонтальній лінійці

Незважаючи на те, що у нас є нижня рамка заголовка, щоб візуально відокремити секції, нам, крім того, потрібна щільна, більш помітна рамка. Так як ми не можемо застосувати до заголовка дві нижніх рамки, можна просто призначити стилі горизонтальній лінійці (hr):

hr#header_stripe{
height: 12px;
position: relative;
top: -7px;
background-color: #191919;
border: none;
color: #191919;
}

Тепер у нас є більш розбірливий роздільник в додачу до рамки шириною 1px:

Будуємо неймовірну форму реєстрації за допомогою jQuery

Крок 6 можна подивитися тут.

Крок 7 – Визначаємо стилі панелі

Тепер нам потрібно призначити стилі панелі. Поки що не додано JQuery, ми збираємося визначити стилі панелі, коли вона буде розгорнута. Коли ми закінчимо CSS, то станемо з допомогою анімації змінювати висоту панелі до нуля, а потім назад до повної висоти; так що нам потрібно бути впевненими, що коли змінюється висота, все залишається на своїх місцях.

Ось код CSS, пізніше я його поясню:

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

Будуємо неймовірну форму реєстрації за допомогою jQuery

Ок, ось трохи коду для одного блоку. Ну, це більше, ніж нічого. Спробуйте перевірити його за допомогою Firefox Extension Firebug або Web Developer, і побачите все, що робить CSS.

Отже, перевіримо, як зараз виглядає дизайн Кроку 7.

Насамперед, нам потрібно, щоб розташування панелі було виражено абсолютними координатами, інакше, коли вона буде збільшуватися, то змінить весь контент далі вниз. Так що ми додаємо обгортку, в яку обертаємо все, а потім центрируем. Якщо не використовувати обгортку, панель з абсолютними координатами буде нелегко відцентрувати.

Далі, ми додаємо дані про стилі для верхньої панелі в цілому. Як ви можете бачити, сюди ж включаються кнопки, розташовані на панелі.

Після цього ми додаємо дані про стилі панелі, яка зазвичай прихована. Це блок, який ви зараз бачите збільшеним. Я зробив його висоту 100%, так що якщо ми збільшуємо або зменшуємо висоту #toppanel, то висота #panel буде такою ж.
До того ж, властивість overflow встановлено на hidden, так що коли висота #toppanel зменшується, вона обрізає вміст панелі.

Якщо ви уважно подивитеся на наведений раніше HTML, то побачите div з ID panel_contents. Цей div, хоча і порожній, дозволяє нам мати прозорий фон, в той час як вміст залишається всередині непрозорого об’єкта.

Крок 8 – Додаємо в панель вміст

До перевірки панелі нам потрібно додати туди який-небудь контент, щоб подивитися, чи він належним чином ховатися. У цьому прикладі ми робимо область реєстрації, так що повинні додати форму, а також зображення, щоб зрівноважити його. Цей крок – для того, щоб просто створити вміст для демонстрації. Це менш важливо і більше елементарно, так що я не буду пояснювати так докладно, як все інше. Ось код:

.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:

Будуємо неймовірну форму реєстрації за допомогою jQuery

Username:

Password:

Будуємо неймовірну форму реєстрації за допомогою jQuery

Крок 8 можна подивитися тут.

Крок 9 — Тестуємо CSS

Тепер, перед використанням jQuery для анімації висоти верхньої панелі нам потрібно переконатися, що все працює гладко. Зараз у нас вже є вміст, тому давайте змінимо висоту #panel на 200px і подивимося, що відбудеться:

Будуємо неймовірну форму реєстрації за допомогою jQuery

Чудово. Крок 9 можна бачити тут.

Тепер змінимо її на 0:

Будуємо неймовірну форму реєстрації за допомогою jQuery

Бездоганно. Тепер ми знаємо, що за допомогою JQuery наш задум буде працювати.

Крок 10 – Визначаємо стилі клавіші

Подивившись на кінцевий продукт, ви побачите, що клавіша, яка зрушує панель вниз, змінюється, як тільки ви натискаєте. Значить, вона перемикається. Насправді, нам потрібні дві клавіші, видимість яких ми будемо перемикати. Перед тим, як сховати одну з них, ми повинні для кожної визначити CSS.

Якщо пам’ятаєте, ми визначили для них клас «.panel_button». Ось зміст таблиці стилів. Я пізніше поясню:

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

Будуємо неймовірну форму реєстрації за допомогою jQuery

Крок 10 – Клавіші панелі

Спочатку ми центрируем кнопку, використовуючи техніку auto margin. Потім ми позиціонуємо її і додаємо фон клавіші. Ми також додаємо всі необхідні стилі, щоб підігнати її до вимог будь-яких браузерів. І робимо клавішу активною: коли ви проводите вказівником над нею, курсор стає дороговказом. Це покращує юзабіліті.

Ми також збираємося обернути текст посилання, щоб забезпечити ефект on hover, а також регулювання положення.

Крок 11 – HTML клавіші

Тепер, готуючись до використання JQuery, ми повинні налаштувати кнопки за допомогою HTML.

Першим ділом ми збираємося додати до кожної кнопки зображення та розташувати його за допомогою CSS; ви це побачите далі в HTML:

.panel_button img{
position: relative;
top: 10px;
border: none;
}

Далі, нам ще потрібно приховати клавішу Hide. Наскільки я ненавиджу inline-стилі, але думаю, якраз цей CSS легше вбудувати, так що ось отриманий код HTML для клавіш з зображеннями:

Будуємо неймовірну форму реєстрації за допомогою jQuery
Login Here
Будуємо неймовірну форму реєстрації за допомогою jQuery
Hide

Ок, зверніть увагу, що прямо зараз клавіша hide прихована за допомогою inline-стилів. Пізніше вона буде перемикатися за допомогою jQuery. Зауважте, ще я додав ID для другої клавіші, так що пізніше ми легко зможемо вибрати її у якості мети.

Будуємо неймовірну форму реєстрації за допомогою jQuery

Крок 11 Клавіша панелі

Крок 12 – Додаємо контент

Це простий, але необхідний крок – додавання контенту. Я написав одну пропозицію і додав абзац тимчасового тексту. Він отцентрирован з допомогою auto margin, і забарвлений в сірий колір:

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

Будуємо неймовірну форму реєстрації за допомогою jQuery

Дивіться текст ззаду панелі Крок 12.

Крок 13 – Час JQuery!

Ок, завершальний акорд — JQuery! Візьміть самий останній на JQuery jQuery.com. Якщо ви новачок, і шукаєте чудові вправи по jQuery, не забудьте переглянути інший підручник на Nettuts — Джеффрі Уэя (Jeffrey Way). Я вже захопив копію з JQuery.com і додав посилання на неї з HTML сторінки на Кроці 4.

Крок 14 – Думаємо про те, що нам потрібно

Давайте до того, як почати писати код, спочатку подумаємо, що ми хочемо виконувати за допомогою JQuery.

Ми хочемо активувати анімацію при клацанні ‘div.panel_button’.

Потім нам потрібно анімувати висоту панелі до 400px.

Потім нам потрібно перемикати клавішу.

Після того ми хочемо активувати зворотний анімацію при клацанні ‘div#hide_button’.

Далі нам потрібно анімувати висоту назад до 0px

Крок 15 – Пишемо код

Отже, перше, з чого ми почнемо, приводячи скрипт в готовність – з наступного JQuery:

$(document).ready(function() {
});
Now we write the code that goes inside there:
$(document).ready(function() {
$(«div.panel_button»).click(
function(){ $(«div#panel»).animate({ height: «400px» }); $(«div.panel_button»).toggle();
}); $(«div#hide_button»).click(function(){
$(«div#panel»).animate({
height: «0px»
});
});
});

Будуємо неймовірну форму реєстрації за допомогою jQuery

Панель в дії — у Кроці 15.

По-перше, при розгляді попереднього коду деяких з вас могло зацікавити, чому ми маємо перемикач тільки в першому процесорі. Ну, вам потрібно пам’ятати, що клавіша hide (сховати) також має клас panel_button. Отже, клік на кнопку ‘Hide» насправді застосуємо до обох обробників.

Крок 16 – Робимо анімацію ‘реальної’

Отже, тепер все виглядає досить приємно, але ми можемо зробити ще більше, щоб анімація виглядала краще. В процесі анімації важливо постаратися як можна більше наслідувати реальності. В даному випадку я придумую приклад з реального життя, такий, як висувається проекційний екран. Пам’ятаєте, коли ви витягуєте, то тягнете трохи далі, ніж він повинен бути, а потім він трохи подається назад. Аналогічно, коли потрібно підняти його назад, ви трохи тягнете його вниз, після чого він дуже швидко згортається.

Давайте спробуємо це зімітувати:

$(document).ready(function() {
$(«div.panel_button»).click(
function(){ $(«div#panel»).animate({ height: «500px» }) .animate({
height: «400px» }, «fast»); $(«div.panel_button»).toggle();
}); $(«div#hide_button»).click(function(){
$(«div#panel»).animate({
height: «0px»
}, «fast»);
});
});

Зверніть увагу, що ми анимируем панель до висоти 500 перед тим як вона стане 400 заввишки. Ми також додали відмінність швидкостей, як в житті, зробивши окремі частини більш повільними. Якщо подивитися на демоверсію, ви побачите, що при приховуванні панелі спочатку вона досягає 500. Знову це з-за того, що обидві клавіші мають один і той же клас. Так що в реальності, коли ви приховуєте панель, відбувається наступний процес:

Анімація до висоти 500 і перемикання

Більш швидка анімація назад до 400

Більш швидка анімація назад до 0px

Тепер у нас є працююча slider-панель, що використовує JQuery. Сподіваюся, ви знайшли цей підручник корисним! Якщо так, будь ласка, відправте його на Digg, StumbleUpon, DZone, і т. д.!

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.