Å lage tilpasset rullegardinmeny for valg er en av de vanligste kravene i nettutvikling. Velg rullegardin lar brukeren velge en verdi fra en forhåndsdefinert liste. Kanskje du lurer på:

«Hvorfor trenger jeg å lage en egendefinert rullegardinkomponent for valg, hvis det allerede er HTML-merkelapp? Jeg kan bruke litt css-styling og det er det!»

Dessverre er ikke rullegardinmenyen for stylingvalg så grei. Innfødt HTML-valgelement tillater ikke oss koder for stylingalternativer.

I dag vises utvalgte rullegardinlister i mange forskjellige varianter. , som har egen implementering for egendefinerte utvalgte rullegardiner. De har bevist funksjonalitet i flere nettlesere og er svært pålitelige. Mange ganger trenger du ikke å bruke noen biblioteker eller rammer, for i mange tilfeller er det enkelt å lage en egendefinert rullegardinmeny oppgave.

I dette blogginnlegget vil jeg dele med deg hvordan du kan bygge funksjonell rullegardinmeny uten å bruke noen biblioteker og rammer. Du kan bruke styling for å velge alternativer og legge til tilpassede komponenter der.

Før du begynner å lage rullegardin for tilpasset valg, bør du spørre følgende spørsmål:

Vil det valgte rullegardinmenyen ha hundrevis eller tusenvis av alternativer?

Kan brukere velge flere alternativer?

I begge tilfeller må du bruke en tredjepartsbibliotek, fordi egen implementering kan ta mye tid. Hvis du trenger en rullegardin med hundrevis av alternativer, bør du gi brukerne en søkefunksjon. Hvis rullegardinmenyen har tusenvis av alternativer, bør du bruke «windowing» -teknikk. For mer informasjon, merk av for Advanced Select Dropdown. kan se litt annerledes ut avhengig av hvilken nettleser du bruker.

I denne opplæringen vil vi slå standard utvalgselement til dette:

HTML

Tradisjonelt, når du trenger å lage en tilpasset rullegardinmeny, vil du bruk følgende struktur.

Siden vi ikke kan bruke select -tag, har vi flere muligheter for å velge html-struktur . Vi kan bruke ul og li -elementer eller div med span -elementer. La oss velge div og span struktur.

CSS

Det er en god ide å start med en css-tilbakestilling, noe som reduserer inkonsekvenser i nettleseren. Jeg valgte Eric Meyers css-tilbakestilling:

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

Jeg foretrekker ved hjelp av boksmodellen der bredde = elementbredde + polstring + rammer.

Først la vi til noen grunnleggende styling for html-elementer. <div class=”custom-select”> posisjon er relativ, fordi vi må bruke absolutt posisjonering for rullegardinlisten.

Neste css brukes til rullegardinpilen.

Du kan se CSS3-egenskaper overgå og transformere. Overgang brukes til å fade inn og fade ut rullegardinlisten. Transform brukes til å animere pilen, hvilken retning representerer rullegardinstatus.

JavaScript

Du trenger ikke å bruke tredjepartsbiblioteker for dommanipulering. For enkel rullegardin trenger du bare grunnleggende javascript-hendelser.

Vi la til klikkfunksjon i innpakningen. Klikkfunksjon bytter klasse .open, som representerer om alternativlisten åpnes eller lukkes. Inne i klikkfunksjonen søker vi <div class=”custom-select”> av this.querySelector(".custom-select"). This inne i klikkfunksjonen representerer klikket element. Vi spør ikke hele dokumentet etter document.querySelector(".custom-select") i tilfelle vi har flere rullegardiner inne i DOM.

I javascript-utdraget over itererer vi over alle alternativene og legger til klikk funksjon, som endrer valgt alternativ ved å legge til .selected klasse. Igjen, inne i klikkfunksjonen spør vi innen klikket på alternativet (this i kodebiten), i tilfelle vi vil endre hendelsesbehandlere for å støtte flere rullegardiner på en side.

Det siste utdraget er valgfritt og tillater nedtrekksliste, hvis brukeren klikker ut av rullegardinmenyen.

Flere valg rullegardiner på en side

Hvis vi ønsker å bruke flere rullegardinvalg på en siden, må vi feste klikklytter til alle .custom-select-wrapper -elementene og lukke alle rullegardinlistene hvis brukeren klikker ut av en rullegardin.

Avansert Velg rullegardin

Hvis du trenger en rullegardinmeny med hundrevis av alternativer eller flere valg, kan du sjekke noen av de tilgjengelige bibliotekene. I denne artikkelen kan du se noen sammenligning av de mest populære bibliotekene.

Hvis du trenger å håndtere tusenvis av alternativer, kan du ikke gjengi en DOM med tusenvis av alternativelementer.Hvis du ikke kan bruke noen backend, må du bruke «windowing» -teknikk.

Hva er «windowing» -teknikk?

I stedet for å gjengi tusenvis av elementer fra en liste på en gang fokuserer «windowing» eller virtualisering på å gjengi bare gjenstander som er synlige for brukeren. Du kan sjekke denne Brian David Vaughn-snakk om implementering av «windowing» -teknikk, som er enkel å implementere og kan gi enorme ytelsesgevinster. >

Konklusjon

Jeg håper dette blogginnlegget hjelper deg med å lage tilpasset valg-rullegardinkomponent. Først må du vite om rullegardinmenyen for valg inneholder mange alternativer, eller om brukere kan velge flere alternativer. Hvis du trenger en grunnleggende utvalgskomponent, beskriver blogginnlegget hele implementeringen i HTML, CSS og JavaScript. Du kan sjekke kildekoden på Github.