Crearea unei componente selective personalizate este una dintre cele mai frecvente cerințe în dezvoltarea web. Meniul derulant Select permite utilizatorului să aleagă o valoare dintr-o listă predefinită. Poate vă întrebați:

„De ce trebuie să creez o componentă verticală select selectivă, dacă există deja etichetă HTML select? Pot aplica niște stiluri CSS și gata!”

Din păcate, meniul derulant de selectare a stilului nu este atât de simplu. Elementul de selectare nativ HTML nu ne permite etichetarea opțiunilor de stilare.

În zilele noastre, meniurile derulante selectate apar în multe variante diferite. Puteți găsi diverse biblioteci javascript și cadre CSS , care au implementare proprie pentru meniurile drop-down selectate personalizate. Au funcționalități dovedite pe mai multe browsere și sunt extrem de fiabile. De multe ori, nu este nevoie să utilizați nicio bibliotecă sau cadru, deoarece în multe cazuri, crearea unui meniu drop-down selectat task.

În această postare de blog, vreau să vă împărtășesc modul în care puteți crea meniul drop-down funcțional fără a utiliza biblioteci și cadre. Puteți aplica stilul pentru a selecta opțiuni și a adăuga componente personalizate acolo.

Înainte de a începe să creați o listă de selecție personalizată, ar trebui să solicitați următoarele întrebări:

Meniul derulant selectat va avea sute sau mii de opțiuni?

Pot utilizatorii să selecteze mai multe opțiuni?

În ambele cazuri, ar trebui să utilizați un bibliotecă terță parte, deoarece implementarea proprie poate dura mult timp. Dacă aveți nevoie de un meniu derulant cu sute de opțiuni, ar trebui să le oferiți utilizatorilor o funcție de căutare. Dacă meniul derulant are mii de opțiuni, ar trebui să utilizați tehnica „fereastră”. Pentru mai multe informații, bifați meniul Selectare avansată.

Exemplu drop-down selectat personalizat

Aici puteți vedea elementul de selectare implicit, care poate arăta puțin diferit în funcție de browserul pe care îl utilizați.

În acest tutorial, vom transforma elementul de selectare implicit în acesta:

HTML

În mod tradițional, atunci când trebuie să creați o listă de selectare personalizată, utilizați următoarea structură.

Deoarece nu putem folosi eticheta select, avem mai multe opțiuni pentru alegerea structurii html . Putem folosi ul și li elemente sau div cu span elemente. Să optăm pentru structura div și span.

CSS

Este o idee bună să începeți cu o resetare CSS, care reduce neconcordanțele browserului. Am optat pentru resetarea css a lui Eric Meyer:

Sursă: https://meyerweb.com/eric/tools/css/reset/

Prefer folosind modelul casetă unde lățime = lățime element + umplutură + margini.

Mai întâi, am adăugat câteva stiluri de bază pentru elementele html. <div class=”custom-select”> poziția este relativă, deoarece trebuie să aplicăm poziționarea absolută pentru lista verticală.

Următorul css este utilizat pentru săgeata verticală.

Puteți vedea proprietățile CSS3 în tranziție și transformare. Tranziția este utilizată pentru fade-in și fade-out lista derulantă. Transformarea este utilizată pentru animarea săgeții, care direcție reprezintă starea derulantă.

JavaScript

Nu este nevoie să utilizați biblioteci terțe pentru manipularea dom. Pentru o listă derulantă simplă, aveți nevoie doar de evenimente javascript de bază.

Am adăugat funcția de clic în pachet. Faceți clic pe funcție comută clasa .open, care reprezintă dacă lista de opțiuni este deschisă sau închisă. În interiorul funcției de clic, căutăm <div class=”custom-select”> de this.querySelector(".custom-select"). This funcția clic din interior reprezintă elementul făcut clic. Nu interogăm întregul document prin document.querySelector(".custom-select") în cazul în care avem mai multe meniuri drop-down în DOM.

În fragmentul javascript de mai sus, iterăm peste toate opțiunile și adăugăm clic funcție, care schimbă opțiunea selectată prin adăugarea clasei .selected. Din nou, în interiorul funcției de clic, interogăm în cadrul opțiunii făcute clic (this în fragment), în cazul în care dorim să schimbăm gestionarele de evenimente pentru a accepta mai multe meniuri drop-down pe o singură pagină.

Ultimul fragment este opțional și permite închiderea listei derulante, dacă utilizatorul dă clic din meniul derulant.

Meniuri de selectare multiple pe o singură pagină

Dacă dorim să folosim meniuri de selectare multiple pe o singură pagina, trebuie să atașăm ascultătorul de clicuri la toate .custom-select-wrapper elemente și să închidem toate meniurile drop-down dacă utilizatorul dă clic dintr-o listă derulantă.

Meniul de selectare avansată

Dacă aveți nevoie de o listă verticală selectată cu sute de opțiuni sau selectare multiplă, puteți verifica unele dintre bibliotecile disponibile. În acest articol puteți vedea o comparație a celor mai populare biblioteci.

În cazul în care trebuie să vă ocupați de mii de opțiuni, nu puteți reda un DOM cu mii de elemente de opțiune.Dacă nu puteți utiliza un back-end, va trebui să utilizați tehnica „windowing”.

Ce este tehnica „windowing”?

În loc să redați mii de elemente dintr-o listă la odată, „fereastră” sau virtualizare se concentrează pe redarea doar a elementelor vizibile utilizatorului. Puteți verifica această discuție pe Brian David Vaughn despre implementarea tehnicii „fereastră”, care este ușor de implementat și poate oferi câștiguri imense de performanță.

Concluzie

Sper că această postare de blog vă va ajuta să creați o componentă verticală selectivă personalizată. La început, trebuie să știți dacă meniul drop-down selectat conține multe opțiuni sau dacă utilizatorii pot selecta mai multe opțiuni. Dacă aveți nevoie de o componentă selectivă de bază, postarea pe blog descrie întreaga implementare în HTML, CSS și JavaScript. Puteți verifica codul sursă pe Github.