Інтерактивна висувна панель на сайт

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

Те, що бібліотека JQuery настільки популярна - не випадково, адже саме з її допомогою можна створювати «розумні» інтерактивні веб сторінки, причому робити це зовсім не складно. І зараз Ви в цьому переконаєтеся.

1. Для початку давайте створимо html файл (я створюю HTML5 файл з ім'ям - «inter.html») і файл таблиці стилів ( «style.css»). Збережемо ці файли так, щоб вони знаходилися в одному каталозі.

У тому ж каталозі створимо папку і дамо їй ім'я - «js». У цю папку нам потрібно зберегти файл бібліотеки JQuery. Файл називається «jquery-1.10.2.min.js» (можливо на момент прочитання цього уроку вийде більш свіжа версія бібліотеки, можете сміливо скористатися їй).

Щоб завантажити файл для підключення бібліотеки з сайту потрібно:

1. Натиснути на кнопку «Download» в меню сайту.
2. На отрившейся сторінці знайти посилання «Download the compressed, production jQuery 1.10.2» (останні цифри - це версія бібліотеки, вони можуть відрізнятися).
3. Натиснути на посилання правою кнопкою миші і вибрати «Зберегти об'єкт як ...», після чого потрібно вибрати те місце, куди Ви хочете зберегти файл.

2. Всі необхідні файли ми створили і зберегли в потрібних місцях. Тепер давайте попрацюємо над html файлом.

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

Тому все, що я зроблю з html файлом - це: підключу до нього таблицю стилів, напишу теги для висувної панелі і створю заголовок і тег для контенту сторінки.

Спочатку мені потрібно створити div з ідентифікатором «wrapper», в якому буде міститися весь контент веб сторінки. Далі я створю div з ідентифікатором «header», в якому буде знаходиться заголовок, поміщений на веб сторінці.

Після div з висувною панеллю можна оголосити div з контентом.

Інтерактивна висувна панель

Якщо ми зараз запустимо нашу веб сторінку в браузері, то побачимо наступне:

Як Ви можете бачити - не дуже-то красиво. Тому давайте попрацюємо над стилями.

3. Отже, давайте відкриємо файл таблиці стилів «style.css», який в минулому кроці ми вже підключили до нашого html файлу.

Давайте спочатку дамо стилів всіх основних елементах сторінки крім елементів висувної панелі (їм ми дамо стилів трохи пізніше).

Зараз ми визначимо фоновий колір, положення елементів на сторінці, розмір і колір для заголовків, також дамо тінь нашим написів за допомогою властивості «text-shadow».

Ось перша частина коду для таблиці стилів:

А ось те, що ці стилі нам дадуть, якщо ми збережемо зміни і оновимо сторінку в браузері:

4. Вже трохи краще і тепер нам потрібно заховати нашу форму, підняти напис «Login» наверх веб сторінки і оформити всі елементи висувної панелі належним чином.

По-перше, ми поставимо div з ідентифікатором «login» ширину, позиціонуємо його абсолютно і розташуємо його в потрібному місці за допомогою властивостей «left» і «top». Крім того, нам потрібно щоб панель розташовувалася над основним контентом сторінки і для цього ми будемо використовувати властивість «z-index».

Абзацу (тегу «p») з ідентифікатором «open» ми додамо настройки шрифту, фоновий колір, колір шрифту, а також відступи. Також поміняємо колір шрифту і фону при наведенні курсору миші на абзац.

По-друге, ми поставимо стилі для форми. Крім налаштування відступів і фонового кольору, тут потрібно звернути увагу на те, що властивість «display» ми встановимо на значення «none», що дозволить нам приховати форму.

Далі ми поставимо деякі стилі для відображення полів форми та її кнопки.

Ось в принципі і все стилі, які необхідно прописати. Додайте в документ таблиці стилів наступний код, а потім оновіть сторінку в браузері і подивіться, що вийде:

5. Як Ви можете бачити, форма сховалася і тепер ми бачимо тільки сам контент веб сторінки і кнопку вгорі, натиснувши на яку повинна висуватися наша інтерактивна панель. Але поки що ця кнопка не працює. Зараз ми це виправимо.

І перше, що нам для цього потрібно зробити - це підключити до документа файл бібліотеки JQuery. Цей файл ми вже завантажили і помістили в папку «js», яка знаходиться в тому ж каталозі, що і наш html файл.

Для того, щоб підключити файл, додайте наступний код перед закриває тегом «head» в файлі «inter.html»:

6. Тепер все готово до того, щоб написати Java Script код і оживити нашу панель.

Код буде зовсім невеликий, тому я не буду виносити його в окремий файл, а напишу його відразу після підключення бібліотеки (хоча для реальних проектів раджу створювати для коду окремий файл з розширення «.js», який Ви будете потім підключати до html документу).

Отже, відразу після підключення бібліотеки JQuery пишемо відкриває і закриває теги «script», а між ці тегами прописуємо спеціальну вбудовану функцію бібліотеки JQuery, яка очікує поки html-код сторінки повністю завантажиться, перш ніж запускати виконання скрипта.

Виглядати це буде так:

Між двома фігурними дужками буде розташовуватися весь наш код, який ми зараз напишемо.

Спочатку нам потрібно вибрати тег абзацу з ідентифікатором «open».

Потім ми робимо так, щоб цей тег реагував на клік миші (присвоюємо подія «click»).

Для того, щоб це реалізувати ми повинні за допомогою селекторів JQuery вибрати тег форми, привласнити йому метод «slideToggle» (своєрідний перемикач в JQuery. При першому натисканні висуває елемент, при повторному - відсуває). У дужках ми передамо цьому методу час ефекту в мілісекундах.

Якщо в двох словах: ми вибираємо елемент, вішаємо на нього подія; в момент, коли відбувається ця подія - певним чином реагує інший елемент, який ми теж вибираємо всередині анонімної функції. Реакція елемента визначається застосованим до нього методом.

Може здатися трохи складно і заплутано, однак, все вищеописане - це всього-на-всього 4 рядки коду (якщо для фігурних дужок залишати окремі рядки).

Ось код, який ми повинні написати між фігурними дужками:

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

Якщо раптом у Вас щось не вийшло, то Ви можете завантажити готові файли з початкових кодів (іконка на самому початку посту) та перевірити свій код.

Я дуже сподіваюся, що урок Вам сподобався.

Це тільки мала частина того, що можна робити за допомогою бібліотеки JQuery. Насправді, якщо опанувати їй досконало, то можна створювати просто неймовірні інтерактивні чудеса на веб сторінках! Дуже б хотілося розповісти про все це.

І насправді я починаю готувати один проект ... це буде курс, в якому я хочу навчити Вас якщо ні всім, то дуже багатьом премудростям бібліотеки JQuery. Думаю, випустити цей проект на початку року, так що стежте за розсилкою та підписуйтесь (якщо ще не підписані), щоб дізнатися про все першими.

Сподіваюся, що настрій у Вас передсвятковий! Зовсім скоро новий рік, який, я думаю, принесе багато нового ... хорошого нового. Принаймні в це потрібно вірити.