Привіт, з Новим Роком!
Я кілька днів був відсутній, оскільки приєднався до експериментального проєкту (я напишу ще один блог про це). Протягом трьох днів я не міг писати чи змінювати жоден рядок коду і міг тільки вносити зміни за допомогою курсора. Це був захоплюючий досвід, але, чесно кажучи, на цьому етапі курсор може виконати лише 90% чи 95% роботи.
В результаті нам вдалося завершити розробку нового проєкту, але штучний інтелект не зміг внести зміни до старого проєкту. З огляду на швидкий розвиток штучного інтелекту цього року, я справді вірю, що за наступні 5 років, програмістів початкового рівня може повністю замінити штучний інтелект. Тому давайте продовжувати вчитися та працювати над тим, щоб стати старшими розробниками!
Хороші старі часи
Зараз основний спосіб реалізації випадаючих списків або панелей наступний:
Натискаєш кнопку, щоб показати випадаючий елемент, позиціонуєш його абсолютно, встановлюєш його z-index і ховаєш випадаючий список, натискаючи будь-де за межами нього.
Кожен з цих кроків потребує JavaScript, що означає, що кількість коду JS для компонента випадаючого списку досить велика.
Тепер, коли браузери підтримують нативний атрибут popover, традиційний спосіб реалізації випадаючих списків можна вважати застарілим. Я можу з упевненістю сказати, що в майбутньому використання атрибута popover для досягнення ефектів випадаючих списків безумовно стане основним рішенням.
Є два основних переваги:
- Код надзвичайно простий;
- Z-index встановлений на найвищий рівень;
Наприклад, ось HTML код:
click show image
JavaScript не потрібен. Клацнувши кнопку, з’явиться зображення, а натискання будь-де за межами зображення автоматично сховає його.
Що стосується верхнього рівня:
Це концепція, яка є унікальною для вебу, і називається “top-layer”. Коли елемент на весь екран, або коли елемент <dialog> відображається за допомогою методу showModal(), він веде себе як top-layer, як показано на зображенні нижче: Як випливає з назви, це шар верхнього рівня, що означає, що жоден елемент на сторінці не може його покрити, навіть якщо для нього встановлений z-index 999999. На сторінці може бути кілька шарів верхнього рівня. Що стосується того, який з них буде на верху, то правило таке: “останній на верху” — елемент, який відображається останнім, буде розміщений зверху. Це відповідає принципу реалістичного дизайну взаємодії з користувачем. З огляду на ці два пункти, атрибут popover — це безумовно найкраща реалізація для взаємодій з випадаючими списками.
Приклад демонстрації
Наприклад, у Material Design ефект випадаючого списку реалізується ось так:
Реалізація цього ефекту дуже проста. Тобі потрібно лише обчислити позиціонування, коли випадаючий список з’являється (за замовчуванням браузер розміщує його по центру).
Приклад HTML структури:
please select
Item 1
Item 2
Item 3
Item 4
Використовуючи радіо-кнопки для імітації поведінки вибору, ми можемо зберегти властивості форми елемента <form>.
Для показу, приховування та налаштування шару — усе це автоматично обробляється атрибутом popover, тому нам не потрібно про це турбуватися.
Отже, єдиний код JavaScript, який нам насправді потрібен, це ось цей.
button.onclick = function () {
const bounding = this.getBoundingClientRect();
select.style.top = (bounding.bottom + window.pageYOffset) + 'px';
select.style.left = (bounding.left + window.pageXOffset) + 'px';
select.style.width = bounding.width + 'px';
};
select.onclick = function (event) {
if (event.target.type == 'radio') {
this.hidePopover();
button.textContent = event.target.parentElement.textContent;
}
}
Це настільки просто, що важко повірити, майже неймовірно?
Сумісність
Атрибут popover підтримується всіма сучасними браузерами, і неминуче він стане широко використовуваним в найближчому майбутньому.
Перекладено з: Times have changed, and now it’s time to use the native popover attribute to create dropdowns