Az egyéni kiválasztás legördülő összetevő létrehozása az egyik leggyakoribb követelmény a webfejlesztésben. A Select legördülő menü lehetővé teszi a felhasználó számára, hogy egy értéket válasszon egy előre definiált listából. Talán kíváncsi vagy rá:

“Miért kell létrehoznom egy egyedi select legördülő elemet, ha már van HTML select címke? Alkalmazhatok néhány css stílust, és ennyi!”

Sajnos a stílus kiválasztása legördülő menü nem olyan egyszerű. A natív HTML select elem nem teszi lehetővé számunkra a stílusbeállítások címkéit.

Manapság a kiválasztott legördülő menü sokféle változatban jelenik meg. Különféle javascript könyvtárakat és css keretrendszereket találhat , amelyek saját megvalósítással rendelkeznek az egyéni kiválasztás legördülő listákhoz. Böngészők közötti funkcionalitást bizonyítottak és nagyon megbízhatóak. Sokszor nem kell semmilyen könyvtárat vagy keretrendszert használni, mert sok esetben az egyéni kiválasztás legördülő menü létrehozása egyszerű feladat.

Ebben a blogbejegyzésben szeretném megosztani veletek, hogyan készíthet funkcionális kiválasztási legördülő menüt könyvtárak és keretrendszerek használata nélkül. Alkalmazhatja a stílusot az opciók kiválasztásához és az egyéni összetevők hozzáadásához.

Mielőtt elkezdené az egyéni kiválasztás legördülő menüt, kérdezze meg a a következő kérdések:

A kiválasztás legördülő menüben több száz vagy több ezer lehetőség áll rendelkezésre?

A felhasználók több lehetőséget is választhatnak?

Mindkét esetben egy harmadik féltől származó könyvtár, mert a saját megvalósítás sok időt vehet igénybe. Ha több száz lehetőségre van szüksége egy legördülő menüre, akkor a felhasználóknak meg kell adnia egy keresési funkciót. Ha a legördülő menüben több ezer lehetőség van, akkor használja az „ablakos” technikát. További információért ellenőrizze az Advanced Select legördülő menüpontot.

Custom Select legördülő példa

Itt láthatja az alapértelmezett select elemet, amely kissé másképp nézhet ki az Ön által használt böngészőtől függően.

Ebben az oktatóanyagban az alapértelmezett select elemet a következővé alakítjuk:

A HTML

Hagyományosan, ha egyéni kiválasztási legördülő menüt kell létrehozni, akkor használja a következő szerkezetet.

Mivel nem használhatjuk a select címkét, több lehetőségünk van a html szerkezet kiválasztására . Használhatunk ul és li elemeket vagy div elemeket a span elemek. Válasszuk a div és a span struktúrát.

A CSS

Jó ötlet kezdje egy css visszaállítással, amely csökkenti a böngésző inkonzisztenciáit. Eric Meyer css visszaállítását választottam:

Forrás: https://meyerweb.com/eric/tools/css/reset/

Inkább a box-modell használatával, ahol szélesség = elem szélesség + párnázat + szegélyek.

Először hozzáadtunk néhány alapvető stílust a html elemekhez. A <div class=”custom-select”> pozíció viszonylagos, mert abszolút pozicionálást kell alkalmaznunk a legördülő listához.

A következő css-t a legördülő nyílhoz használjuk.

Láthatja a CSS3 tulajdonságok átmenetét és átalakulását. Az átmenet a legördülő lista elhalványul és elhalványul. A Transform elemet a nyíl animálására használják, amely irány a legördülő állapotot képviseli.

A JavaScript

Nem kell harmadik féltől származó könyvtárakat használni a domén manipulálásához. Az egyszerű legördülő menühez csak alapvető javascript eseményekre van szükség.

A kattintás funkciót felvettük a burkolóba. Kattintson a funkcióra a .open osztály váltására, amely azt jelzi, hogy az opciók listája nyitva vagy zárva van-e. A kattintási funkción belül <div class=”custom-select”> -et this.querySelector(".custom-select") alapján keresjük. A This kattintási függvényen belül a kattintott elem jelenik meg. Nem a teljes dokumentumot kérdezzük document.querySelector(".custom-select") segítségével, ha a DOM-on belül több legördülő menü található.

A fenti javascript-kódrészletben az összes opciót átismételjük, és kattintást adunk hozzá. függvény, amely megváltoztatja a kiválasztott opciót a .selected osztály hozzáadásával. Ismét a kattintási funkción belül a kattintott opción belül keresünk (this a részletben), arra az esetre, ha az eseménykezelőket úgy szeretnénk megváltoztatni, hogy egy oldalon több legördülő menüt támogassanak.

Az utolsó kódrészlet nem kötelező, és lehetővé teszi a legördülő lista bezárását, ha a felhasználó kimarad a legördülő menüből.

Többszörös kijelölés legördülő menü egy oldalon

Ha egynél több választási legördülő menüt akarunk használni oldalon, csatolnunk kell a kattintásfigyelőt az összes .custom-select-wrapper elemhez, és be kell zárnunk az összes legördülő menüt, ha a felhasználó egy legördülő menüből kattint.

Speciális Válasszon legördülő menü

Ha több száz vagy többszörös választási lehetőségre van szüksége a kiválasztáshoz, ellenőrizheti az elérhető könyvtárak egy részét. Ebben a cikkben láthatja a legnépszerűbb könyvtárak néhány összehasonlítását.

Ha több ezer opcióval kell foglalkoznia, akkor nem hozhat létre DOM-ot ezer opcióelemmel.Ha nem tud háttérképet használni, akkor “ablakos” technikát kell használnia.

Mi az az “ablakos” technika?

Ahelyett, hogy több ezer elemet jelenítene meg egy listáról a következő címen: egyszer a „felszámolás” vagy a virtualizáció arra összpontosít, hogy csak az elemeket tegye láthatóvá a felhasználó számára. Megtekintheti ezt a Brian David Vaughn beszélgetést a „felszámolás” technika megvalósításáról, amely könnyen megvalósítható és hatalmas teljesítménynövekedést eredményezhet.

Következtetés

Remélem, hogy ez a blogbejegyzés segít Önnek abban, hogy miként lehet felépíteni az egyedi select legördülő listát. Először tudnia kell, hogy a select legördülő menü sok lehetőséget tartalmaz-e, vagy a felhasználók több lehetőséget is választhatnak. Ha alapvető kiválasztási összetevőre van szüksége, a blogbejegyzés a HTML, CSS és JavaScript teljes megvalósítását írja le. A forráskódot a Githubon ellenőrizheti.