Oprettelse af tilpasset vælg dropdown-komponent er et af de mest almindelige krav i webudvikling. Vælg rullemenu giver brugeren mulighed for at vælge en værdi fra en foruddefineret liste. Måske spekulerer du på:

“Hvorfor skal jeg oprette en brugerdefineret vælg dropdown-komponent, hvis der allerede er HTML-valgtag? Jeg kan anvende noget css-styling, og det er det!”

Desværre er rullemenuen til styling-valg ikke så ligetil. Native HTML-valgelement tillader os ikke tags til stylingmuligheder.

I dag vises valgte rullelister i mange forskellige varianter. Du kan finde forskellige javascript-biblioteker og css-rammer , som har egen implementering til brugerdefinerede vælg dropdowns. De har bevist funktionalitet på tværs af browsere og er meget pålidelige. Mange gange behøver du ikke bruge nogen biblioteker eller rammer, for i mange tilfælde er det let at oprette en brugerdefineret rullemenu opgave.

I dette blogindlæg vil jeg dele med dig, hvordan du kan oprette funktionel vælg-rullemenu uden at bruge nogen biblioteker og rammer. Du kan anvende styling for at vælge indstillinger og tilføje brugerdefinerede komponenter der.

Før du begynder at oprette brugerdefineret rullemenu, skal du spørge følgende spørgsmål:

Vil den valgte rullemenu have hundreder eller tusinder af muligheder?

Kan brugere vælge flere muligheder?

I begge tilfælde skal du bruge en tredjepartsbibliotek, fordi egen implementering kan tage meget tid. Hvis du har brug for en rullemenu med hundredvis af muligheder, skal du give brugerne en søgefunktion. Hvis dropdown har tusindvis af muligheder, skal du bruge “windowing” -teknik. For mere information, tjek Avanceret Select Dropdown.

Custom Select Dropdown Eksempel

Her kan du se standardvalgelement, som kan se lidt anderledes ud, afhængigt af hvilken browser du bruger.

I denne vejledning vil vi slå standardvalgelement til dette:

HTML

Når du traditionelt har brug for at oprette en brugerdefineret vælg dropdown, ville du brug følgende struktur.

Da vi ikke kan bruge select -tag, har vi flere muligheder for at vælge html-struktur . Vi kan bruge ul og li -elementer eller div med span elementer. Lad os vælge div og span struktur.

CSS

Det er en god idé at start med en css-nulstilling, hvilket reducerer browserens inkonsekvenser. Jeg valgte Eric Meyers css-nulstilling:

Kilde: https://meyerweb.com/eric/tools/css/reset/

Jeg foretrækker ved hjælp af boksmodellen hvor bredde = elementbredde + polstring + kanter.

Først tilføjede vi nogle grundlæggende styling til html-elementer. <div class=”custom-select”> position er relativ, fordi vi er nødt til at anvende absolut positionering til rullelisten.

Den næste css bruges til rullemenuen.

Du kan se CSS3-egenskaber overgå og transformere. Overgang bruges til fade-in og fade-out på rullelisten. Transform bruges til at animere pilen, hvilken retning repræsenterer dropdown-tilstand.

JavaScript

Du behøver ikke bruge tredjepartsbiblioteker til dommanipulation. For enkel rullemenu har du kun brug for grundlæggende javascript-hændelser.

Vi tilføjede klikfunktion til indpakningen. Klikfunktion skifter klasse .open, som repræsenterer, hvis valglisten åbnes eller lukkes. Inde i klikfunktionen søger vi <div class=”custom-select”> efter this.querySelector(".custom-select"). This inde i klikfunktionen repræsenterer elementet, der klikkes på. Vi spørger ikke hele dokumentet af document.querySelector(".custom-select") hvis vi har flere dropdowns inde i DOM.

I javascript-uddraget ovenfor gentager vi alle muligheder og tilføjer klik funktion, som ændrer den valgte indstilling ved at tilføje .selected klasse. Igen, inden for klikfunktionen forespørger vi inden for den klikkede mulighed (this i uddraget), hvis vi vil ændre begivenhedshåndterere for at understøtte flere dropdowns på en side.

Det sidste uddrag er valgfrit, og tillad lukning af rullelisten, hvis brugeren klikker ud af rullelisten.

Flere valg af rullelister på en side

Hvis vi vil bruge flere vælg rullelister på en side skal vi vedhæfte kliklytter til alle .custom-select-wrapper -elementer og lukke alle dropdowns, hvis brugeren klikker ud af en dropdown.

Advanced Select Dropdown

Hvis du har brug for en rullemenu med hundreder af valgmuligheder eller multiple select, kan du kontrollere nogle af de tilgængelige biblioteker. I denne artikel kan du se en sammenligning af de mest populære biblioteker.

Hvis du har brug for at håndtere tusindvis af muligheder, kan du ikke gengive en DOM med tusindvis af valgelementer.Hvis du ikke kan bruge nogen back-end, skal du bruge “windowing” -teknik.

Hvad er “windowing” -teknik?

I stedet for at gengive tusindvis af elementer fra en liste på en gang fokuserer “windowsing” eller virtualisering på at gengive kun emner, der er synlige for brugeren. Du kan tjekke denne Brian David Vaughn-snak om implementering af “windowing” -teknik, som er let at implementere og kan give enorme præstationsgevinster.

Konklusion

Jeg håber, dette blogindlæg hjælper dig med at oprette brugerdefineret vælg dropdown-komponent. Først skal du vide, om rullemenuen select indeholder mange muligheder, eller om brugerne kan vælge flere muligheder. Hvis du har brug for en grundlæggende valgkomponent, beskriver blogindlæg hele implementeringen i HTML, CSS og JavaScript. Du kan kontrollere kildekoden på Github.