Інтерактивний розкривається контент на сайті.
Інтерактивні сторінки сайтів подобаються користувачам, виводять веб сайт на новий рівень, але крім цього вони ще й здатні робити веб сторінки зручніше. У цьому уроці я покажу Вам як нам може бути корисний на веб сайтах інтерактивний розкривається контент.
Наприклад, якщо на нашому веб сайті представлений деякий каталог, який передбачає наявність фотографій і будь-яку інформацію, що описує кожну з них, то для користувача набагато зручніше буде переглядати цю інформацію на тій же сторінці, ніж весь час переходити на нову, а потім знову повертатися, щоб ознайомитись з іншими екземпляри з веб каталогу. Але вмістити все на одній веб сторінці дуже проблематично: тоді веб сторінка вийде дуже довгою і, думаю, не дуже зручною. Саме в подібних ситуаціях нам допоможе інтерактивний веб контент на сайті, який буде з'являтися в той час, коли користувачеві це буде потрібно і зникати, знову ж таки, коли користувач веб сторінки цього захоче. В цьому і полягає сенс інтерактивності веб сайтів - користувач виробляє дії, а інтерактивний сайт виконує його побажання. Це може бути актуально для каталогу товарів, якихось фото з описом і навіть просто коли одна веб сторінка передбачає розмістити в себе багато контенту (щоб не робити її надто довгою), для прихованих заміток, які можуть з'являтися і зникати. Я думаю, Ви знайдете ще дуже багато випадків для застосування такої веб інтерактивності. А найголовніше зробити це досить нескладно. Давайте перейдемо від слів до справи і почнемо!
1. Отже, ми будемо створювати веб сторінку для фірми, яка займається красивою упаковкою подарунків. На нашій інтерактивній веб сторінці буде каталог з фотографіями, натискаючи на які відвідувач може побачити інтерактивний контент з інформацією про дану упаковці. Натиснувши повторно, інтерактивна веб вкладка буде закриватися. Так без переходу на нову веб сторінку сайту користувач може комфортно переглядати всі варіанти. Крім того, у відкритій картинки буде змінюватися стиль і вона буде виглядати трохи інакше. І все це ми зробимо все лише за допомогою декількох Сточек коду jQuery. Почнемо ми з нескладного дизайну самої веб сторінки. Створимо html і css файли і назвемо їх index.html і style.css. Я не буду створювати хитромудрий дизайн, так як в ціль цього уроку трохи інша: показати Вам як зробити веб сторінку з інтерактивним контентом. Ми створимо просту сторінку з шапкою, верхній навігацією і секцією контенту, де і буду наші інтерактивні картинки. Для цього в index.html пропишемо наступний код:
Подарунок "День і ніч"
Чудовий подарунок в чорному папері з білою трояндою.
Класика і елегантність
Подарунок "Ніжність"
Світлі тони і ніжні весняні квіти передадуть всі Ваші ніжні почуття!
Подарунок "День і ніч"
Чудовий подарунок в чорному папері з білою трояндою.
Класика і елегантність
Подарунок "Ніжність"
Світлі тони і ніжні весняні квіти передадуть всі Ваші ніжні почуття!
Подарунок "День і ніч"
Чудовий подарунок в чорному папері з білою трояндою.
Класика і елегантність
Подарунок "Ніжність"
Світлі тони і ніжні весняні квіти передадуть всі Ваші ніжні почуття!
Подарунок "День і ніч"
Чудовий подарунок в чорному папері з білою трояндою.
Класика і елегантність
Подарунок "Ніжність"
Світлі тони і ніжні весняні квіти передадуть всі Ваші ніжні почуття!
Тут все гранично просто. Тег шапки веб сайту, тег верхньої навігації, тег section з інтерактивним контентом і тег футера. У тезі з контентом розташовано вісім картинок, у кожної з них своє зображення (їх Ви можете знайти в додаткових матеріалах). Після кожного тега картинки розташований тег div, в якому написано відповідне опис для кожної інтерактивної картинки (у мене опису двох типів, але у Вас вони все звичайно ж будуть різні). У всіх цих тегів div один і той же клас class = "description. Також ми вже підключили до сторінці наш файл зі стилями, але стилів у нас ще поки немає, тому сторінка на даному етапі виглядає ось так:
Тут слід звернути увагу на те, що ми ховаємо блоки з описом картинок, привласнюючи всім дівам з класом description display: none. Саме цей стиль буде в подальшому міняти наш JQuery код, відкриваючи і знову приховуючи інтерактивний розкривається контент.
Після застосування цих стилів наша веб сторінка буде виглядати наступним чином:
3. Настав час зайнятися інтерактивністю нашої веб сторінки. Для початку нам потрібно завантажити і підключити бібліотеку JQuery до веб сторінці. Ви можете завантажити її з сайту jquery.com або знайти її в файлах додаткових матеріалів до цього уроку. Я створюю окрему папку scripts для всіх скриптів. Також створіть таку папку, помістіть туди скачаний файл бібліотеки jquery і підключіть її в нашому документі index.html між тегами head.
4. Тепер створимо новий файл java script і збережемо його також в папці для скриптів з ім'ям myscript.js. Підключимо і його до index.html документу. Я роблю це перед закриває тегом body.
Чому в кінці? Тому що так наша сторінка буде завантажуватися швидше, ніж якби ми підключали цей файл на початку.
5. Перейдемо до щойно створеного файл і почнемо створювати інтерактивність для нашої веб сторінки.
Тут буде всього кілька рядків, які змусять наш інтерактивний контент розкриватися і закриватися, а активний елемент міняти свій стиль.
6. Коли наша сторінка готова, запускається функція. У функції знаходиться слухач подій, який реагує на клік мишею по елементу класу «presents» (цей клас присвоєно всім нашим картинкам).
Коли відбувається клацання, запускається функція, яка знаходить наступний див, стоїть після картинки (це див з описом даної картинки) і «вішає» на неї перемикач slideToggle. Цей перемикач працює за принципом «відкривати вміст при першому клацанні мишею і закривати при повторному».
Наступна рядок «вішає» на картинку toggleClass, який буде привласнювати клас 'activ' зображенні при першому натисканні на неї і видаляти при повторному.
Ось і все, залишилося тільки прописати клас 'activ' в документі зі стилями. Давайте зробимо це: перейдемо в style.scc і пропишемо наступний рядок:
Можна подивитися роботу скрипта в браузері, перезагрузив сторінку.
Щоб отримувати нові уроки про те як ще можна використовувати JQuery (і не тільки), підписуйтесь на оновлення блогу. Я обіцяю Вам ТІЛЬКИ цікаві і корисні уроки! Дякую за увагу і удачі!