Таблиця порівняння товарів
Адаптивна таблиця порівняння товарів з можливістю фільтрації.
Якщо ви займаєтеся розробкою онлайн магазину з величезною кількістю товарів, то можливість порівняння продуктів безсумнівно стане в нагоді. Найпростіший варіант реалізації - проста HTML таблиця. Якщо ж ви хочете надати користувачам можливість порівнювати 6 і більше товарів, то дана задача ускладнюється. До того ж потрібно передбачити адаптивність під різні пристрої.
У цій статті ви знайдете готове рішення - таблицю порівняння товарів онлайн магазину. Наша реалізація народилася після ознайомлення з сайтом Sony UK.
HTML структура
HTML структура буде складатися з елемента section.cd-products-comparison-table. вписаного в
Виставляємо елементу .cd-products-wrapper width рівну 100% і overflow-x рівну auto; ширина елемента .cd-products-columns буде дорівнює сумі всіх колонок + надаємо йому можливість прокрутки. Позиціонування блоку div.features буде абсолютним, поміщаємо його в лівій стороні області огляду.
На великих моніторах (1170px), клас .top-fixed буде прикріплюватися до .cd-products-table при прокручуванні сторінки, щоб головна інформація про товар була завжди вгорі (назва товару і зображення):
Обробка подій
Для реалізації таблиці продуктів створимо об'єкт productsTable. а так само скористаємося функцією bindEvents для прослушки деяких подій:
Як ви вже зрозуміли, ми прикріпили прослушку прокрутки по .cd-products-wrapper; при додаванні класу .top-fixed до елементу .cd-products-table. позиції елементів .top-info будуть зафіксовані, тому разом з .cd-products-columns прокрутка відбуватися не буде. Функція updateLeftScrolling () використовується для актуалізації даних в таблиці при прокручуванні по елементу .cd-products-wrapper.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!