Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Створюємо приголомшливу форму для входу на сайт за допомогою jQuery

by
Read Time:13 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

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




У цьому посібнику ми створимо панель, що розкривається для відображення додаткового контенту, використовуючи jQuery для зміни висоти панелі.
Сьогодні ми будемо створювати один із можливих варіантів форми
для входу на сайт для нового розділу tutsplus, що скоро з'явиться.


Крок 1: Макет сторінки у Photoshop

Для початку нам потрібно спланувати наш макет та надати йому крутий вигляд за допомогою Photoshop.
Завдяки Collis та його фантастичним вмінням роботи з Photoshop, ми маємо відмінний макет для роботи.
Ви можете отримати файл  PSD (*  Photoshop Document – документ Photoshop. Тут і надалі примітка перекладача) з початковим виглядом панелі та файл PSD з кінцевим результатом для подальшого вивчення у прикріпленому архіві.
Але у ньому все цілком зрозуміло.
Також у ньому нема яких-небудь градієнтів, так що у нас повинно вистачити вмінь реалізувати його лише завдяки CSS

BeforeBeforeBefore .

Вище показано, як буде виглядати демоверсія у звичайному стані

AfterAfterAfter .

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


Крок 2: Планування структури сторінки

Спершу нам потрібно створити структуру сторінки.
Для того щоб створити макет вище, що нам потрібно зі структурних елементів?

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

    Вау... без класів або будь-якого контенту всередині вона виглядає, як купа безглуздих тегів div, проте все це буде потрібно для реалізації коду CSS та jQuery.
    Тепер ми починаємо додавати класи,
    готуючись до додавання коду CSS.


    Крок 3: Підготування перед додаванням CSS: класи та id

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

    AreasAreasAreas .

    Зверніть увагу: я виділяє області на нормальному зображенні, що не виділено після переміщення поверх нього курсору.

    Нижче наводиться код розмітки з доданими класами та id:

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


    Крок 4: Підключаємо потрібні файли

    Перед тим як піти далі, нам потрібно підключити файл CSS у файлі з базовою розміткою:
    Я створив таблицю стилів під назвою "style.css".
    Раз уж ми додаємо код до заголовка, то могли би також додати і файли JavaScript та jQuery.
    Нижче наведено код для заголовка сторінки:


    Крок 5: Додаємо стильове оформлення для каркаса розмітки: заголовок

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

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

    Додавати фонове зображення необов'язково.
    Мені так подобається шрифт Bell Gothic BT, що я вирішив використовувати його і при створенні зображення.
    Альтернативний варіант: ви можете просто додати стильове оформлення для чистого тексту завдяки додавання правил CSS для тегів h1 та h2:

    і подальшого перетворення заголовка у наступний:

    Що ж, тепер результат повинен виглядати наступним чином:

    Ви можете ознайомитися з результатом цього етапу за посиланням

    step 5step 5step 5 .

    Крок 6: Додаємо стильове оформлення для горизонтальної лінії

    Хоча ми маємо нижню границю заголовка для наглядного відокремлення розділів, нам також потрібно додати товсту більш помітну границю.
    Оскільки ми не можемо застосувати дві властивості для встановлення значення нижньої границі,
    то ми просто додаємо стильове оформлення для тегу hr:

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

    step6step6step6 :

    Ви можете ознайомитися з результатом цього етапу за посиланням.


    Крок 7: Додаємо стильове оформлення для панелі

    Тепер нам потрібно додати стильове оформлення для тегів div.
    До того як додати код jQuery, ми додамо стильове оформлення для панелі в розгорнутому стані.
    Після додання коду CSS ми змінемо висоту панелі до нуля і потім повернемо її початкове значення;
    так що нам потрібно впевнитися в тому, що після змін висоти вона залишається тою же самою.

    Нижче наведено код CSS, який я поясню пізніше

    step7step7step7 :

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

    Ознайомтеся з результатом цього етапу
    за посиланням.

  • Спершу нам потрібно, щоб для панелі було задано абсолютне позиціонування, інакше після розкриття вона відтисне весь  нижче розташований контент униз.
    Так що ми додаємо обгортку, що обгортає решту елементів, і потім вирівнюємо по центру її вміст.
    Якщо ми не скористаємося обгорткою, то панель, для якої встановлено абсолютне позиціонування,
    було бі не так просто вирівняти по центру.
  • Потім ми додаємо стильове оформлення для верхньої панелі як цілого.
    Як ви бачите, до її складу входять кнопки панелі.
  • Після цього ми додаємо стильові правила тільки для панелі (* елемент з id panel), яку у нормі приховано.
    Це прямокутник, який на зображенні зараз розгорнуто.
    Я задав значенням висоти 100%, так що якщо ми збільшимо або зменшимо висоту #toppanel, то висота #panel буде такою ж.
    Також ми задаємо у якості значення overflow (* керує відображенням вмісту блочного елемента, якщо воно повністю не вміщується та виходить за область заданих розмірів) hidden (* відображається тільки область всередині елемента, решту буде приховано),
    так що у випадку зниження висоти #toppanel контент панелі буде приховано.
  • Якщо ви проглянете раніше написаний код HTML, то ви побачите елемент div з id panel_contents.
    Завдяки цьому елементові ми можемо забезпечити прозорість фону і водночас
    підтримувати контент усередині непрозорим.

  • Крок 8: Додаємо контент до панелі

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

    CSS:

    HTML

    step8step8step8 :

    Ознайомитися з результатом цього етапу ви можете за посиланням.


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

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

    :

    Чудово. Ви можете ознайомитися з результатом цього етапу за посиланням.
    Тепер ми змінемо значення висоти до 0

    step9step9step9 :

    Прекрасно. Тепер ми знаємо, що наша панель буде функціонувати після додавання коду jQuery.


    Крок 10: Додаємо стильове оформлення для кнопки

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

    Якщо пам'ятаєте, ми додали клас ".panel_button" до них. Нижче наводиться інформація про стильове оформлення кнопок.
    Я дам до неї пояснення пізніше

    101010 .

    Ви можете ознайомитися з результатом цього етапу за посиланням.

  • Спочатку ми вирівнюємо кнопку завдяки додаванню відступів, розмір яких буде автоматично розраховано браузером.
    Потім ми її позиціонуємо та додаємо фонове зображення.
    Також ми додаємо правила, потрібні для врахування відмінностей у правилах різних браузерів.
    І надаємо кнопці при переміщенні поверх неї курсору такий вигляд, неначе її можна натиснути, завдяки зміні вигляду курсору на «курсор-рука».
    Завдяки цьому просто покращується зручність і простота використання.
  • Також ми обернемо текст у посилання для зміни його стильового оформлення при переміщенні курсору поверх посилання
    та встановлення позиціонування.

  • Крок 11: Код HTML для кнопок

    Тепер, готуючись до додаванню jQuery, нам потрібно налаштувати характеристики кнопок за допомогою HTML.
    Спочатку ми додамо зображення до кожної кнопки і встановимо для неї позиціонування за допомогою CSS,
    ви побачите код через секунду:

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

    Що ж, зверніть увагу, що прямо зараз кнопку для згортання панелі приховано завдяки правилу CSS, доданого у самому тегу.
    Її видимість буде переключено пізніше за допомогою jQuery.
    Зверніть увагу, що я також додав id для другою кнопки, завдяки чому ми можемо пізніше звернутися до неї

    111111 .

    Ви можете ознайомитися з результатом цього етапу за посиланням.


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

    Це швидкий, але необхідний етап, на якому ми додаємо контент.
    Я написав одне речення та додав один параграф тимчасового тексту (* текст, який дизайнер додає замість головного до макету сторінки, щоб зосередитися на графічних елементах зверстаного листа).
    Я задав вирівнювання для нього завдяки додаванню відступів, розмір яких буде автоматично розраховано браузером, і покрасив його у сірий колір

    121212 :

    Погляньте не текст за панеллю за посиланням.


    Крок 13: Прийшов час скористатися jQuery!

    Що ж, переходимо до останньої частини посібника – jQuery.
    Ви можете завантажити останню версію jQuery на jQuery.com.
    Якщо ви новачок у роботі з нею, то обов'язково ознайомтеся з іншим посібником Nettuts, написаним Jeffrey Way, у якості відмінного ресурсу для вивчення jQuery.
    Я вже отримав копію jQuery з jQuery.com та підключив їх до сторінки у Кроку 4.


    Крок 14: Подумайте про те, що нам потрібно

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

  • Активація анімації при натисненні 'div.panel_button'.
  • Зміна висоти панелі до 400px.
  • Переключення кнопки.
  • Активація зворотної анімації при натисненні кнопки 'div#hide_button'.
  • Зміна висоти панелі до 0px.

  • Крок 15: Пишемо код

    Ми починаємо  з того, що пишемо інструкцію для запуску скрипта після того, як документ завантажено, за допомогою наступного коду jQuery

    BeforeBeforeBefore :

    З панеллю у русі можете ознайомитися за посиланням.

    Спочатку, після ознайомлення з попереднім кодом, деякі з вас могли би здивуватися, чому я переключив видимість кнопок тільки у першому обробнику.
    Що ж, ви повинні пам'ятати, що кнопка для приховання панелі також має клас panel_button.
    Тому при натисненні кнопки 'Hide' ви
    в дійсності застосовуєте двоє обробників.


    Крок 16: Робимо так, щоб анімація виглядала, як імітуємий нею процес у реальності

    Що ж, зараз анімація виглядає цілком задовільно, проте ми як і раніше можемо дещо вдосконалити; наприклад покращити вигляд анімації.
    При реалізації анімації звичайно важливо спробувати зімітувати процес з реального життя (* життя за межами кіберпростору) як можна правдоподібніше.
    У нашому випадку я імітую приклад з екраном проектора, що опускається.
    Пам'ятайте, що при його розкритті ви його опускаєте нижче кінцевого положення, а потім він піднімається трохи вгору.
    Подібним чином, коли ви хочете його звернути, то ви спочатку опускаєте його трохи вниз перед тим,
    як він швидко згорнеться.

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

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

  • Збільшення висоти до 500 та зміна видимості кнопок
  • Зменшення висоти до 400
  • Зменшення висоти до 0
  • Тепер ми маємо працюючу панель, що розкривається, реалізовану за допомогою jQuery. Сподіваюся, що ви з користю провели час!
    Якщо так, то поділіться їм на Digg, StumbleUpon, DZone тощо!

    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.