Mukautetun valinnan avattavan komponentin luominen on yksi yleisimmistä vaatimuksista verkkokehityksessä. Valitse avattava valikko antaa käyttäjän valita yhden arvon ennalta määritetystä luettelosta. Ehkä mietit:

”Miksi minun on luotava mukautettu avattava valintakomponentti, jos HTML-valintatunniste on jo olemassa? Voin käyttää joitain css-muotoiluja ja siinä kaikki!”

Valitettavasti tyylinvalinnan pudotusvalikko ei ole niin suoraviivaista. Natiivin HTML-valinnan elementti ei salli muotoiluvaihtoehtojen tunnisteita.

Nykyään valitut pudotusvalikot näkyvät monissa muunnelmissa. Löydät erilaisia javascript-kirjastoja ja css-kehyksiä , joilla on oma toteutus mukautettuja valintoja varten. Ne ovat osoittautuneet selainten yli toimiviksi ja erittäin luotettaviksi. Monta kertaa sinun ei tarvitse käyttää kirjastoja tai kehyksiä, koska monissa tapauksissa mukautetun valinnan luominen on helppoa tehtävä.

Tässä blogiviestissä haluan kertoa kanssasi, kuinka voit luoda toiminnallisen valinnan pudotusvalikon käyttämättä kirjastoja ja kehyksiä. Voit käyttää tyyliä valitaksesi vaihtoehtoja ja lisätäksesi mukautettuja komponentteja sinne.

Ennen kuin aloitat mukautetun valinnan tekemisen, kysy seuraavat kysymykset:

Onko pudotusvalikossa satoja vai tuhansia vaihtoehtoja?

Voivatko käyttäjät valita useita vaihtoehtoja?

Molemmissa tapauksissa sinun on käytettävä kolmannen osapuolen kirjasto, koska oma toteutus voi viedä paljon aikaa. Jos tarvitset avattavan valikon, jossa on satoja vaihtoehtoja, sinun tulee tarjota käyttäjille hakuominaisuus. Jos avattavassa valikossa on tuhansia vaihtoehtoja, sinun on käytettävä ”ikkunointitekniikkaa”. Lisätietoja saat valitsemalla Lisäasetukset-pudotusvalikosta.

Mukautetun valinnan pudotusvalikko

Täältä näet oletusvalintaelementin voi näyttää hieman erilaiselta käyttämästäsi selaimesta riippuen.

Tässä opetusohjelmassa muutamme oletusarvoisen elementin tälle:

HTML

Perinteisesti, kun sinun on luotava mukautettu valintavalikko, käytä seuraavaa rakennetta.

Koska emme voi käyttää tagia select, meillä on enemmän vaihtoehtoja html-rakenteen valitsemiseen . Voimme käyttää elementtejä ul ja li tai div kanssa span -elementit. Valitaan rakenne div ja span.

CSS

Se on hyvä idea aloita css-nollauksella, mikä vähentää selaimen epäjohdonmukaisuuksia. Valitsin Eric Meyerin CSS-palautuksen:

Lähde: https://meyerweb.com/eric/tools/css/reset/

Pidän parempana käyttämällä laatikkomallia, jossa leveys = elementin leveys + täyte + reunat.

Ensinnäkin lisättiin html-elementtien perusmuotoilu. <div class=”custom-select”> -sijainti on suhteellinen, koska meidän on käytettävä absoluuttista paikannusta avattavaan luetteloon.

Seuraavaa css: tä käytetään avattavassa nuolessa.

Voit nähdä CSS3-ominaisuuksien siirtymisen ja muunnoksen. Siirtymää käytetään avattavaan luetteloon. Muuntoa käytetään nuolen animointiin, mikä suunta edustaa avattavaa tilaa.

JavaScript

Sinun ei tarvitse käyttää kolmannen osapuolen kirjastoja dom-manipulointiin. Yksinkertaista avattavaa valikkoa varten tarvitset vain Javascriptin perustapahtumat.

Lisäsimme napsautustoiminnon kääreeseen. Napsautustoiminto vaihtaa luokan .open, joka tarkoittaa, onko vaihtoehtoluettelo avattu vai suljettu. Napsautustoiminnon sisällä haemme <div class=”custom-select”> this.querySelector(".custom-select"). This napsautustoiminnon sisällä edustaa napsautettua elementtiä. Emme kysele koko asiakirjaa document.querySelector(".custom-select"), jos DOM: n sisällä on enemmän pudotusvalikkoja.

Yllä olevassa javascript-koodinpätkässä toistetaan kaikki vaihtoehdot ja lisätään napsautus funktio, joka muuttaa valittua vaihtoehtoa lisäämällä .selected -luokan. Jälleen kysytään napsautustoiminnon sisällä napsautetusta vaihtoehdosta (this koodinpätkässä), jos haluamme vaihtaa tapahtumankäsittelijät tukemaan useita pudotuksia yhdellä sivulla.

Viimeinen katkelma on valinnainen ja sallii avattavan luettelon sulkemisen, jos käyttäjä napsauttaa pudotusvalikkoa.

Useita valintoja-pudotusvalikot yhdellä sivulla

Jos haluamme käyttää useita avattavia valintoja yhdellä sivulla -sivulle, meidän on liitettävä napsautusten kuuntelija kaikkiin .custom-select-wrapper -elementteihin ja suljettava kaikki avattavat valinnat, jos käyttäjä napsauttaa pudotusvalikkoa.

Lisäasetukset Valitse pudotusvalikko

Jos tarvitset Select-pudotusvalikon, jossa on satoja vaihtoehtoja tai useita valintoja, voit tarkistaa joitain käytettävissä olevia kirjastoja. Tässä artikkelissa on joitain suosituimpien kirjastojen vertailuja.

Jos sinun on käsiteltävä tuhansia vaihtoehtoja, et voi tehdä DOM: ää tuhansilla vaihtoehtoelementeillä.Jos et voi käyttää mitään taustaa, sinun on käytettävä ”windowing” -tekniikkaa.

Mikä on ”windowing” -tekniikka?

Sen sijaan, että hahmonnettaisiin tuhansia elementtejä luettelosta osoitteessa Kerran ”windowing” tai virtualisointi keskittyy vain kohteiden tekemiseen käyttäjälle näkyviksi. Voit tarkistaa tämän Brian David Vaughnin puheen ”windowing” -tekniikan toteuttamisesta, joka on helppo toteuttaa ja joka voi tuottaa valtavia parannuksia.

Päätelmä

Toivon, että tämä blogiviesti auttaa sinua luomaan mukautetun valinnan pudotusvalikkokomponentin. Aluksi sinun on tiedettävä, sisältääkö pudotusvalikko monia vaihtoehtoja vai voivatko käyttäjät valita useita vaihtoehtoja. Jos tarvitset perustavanlaatuisen komponentin, blogikirjoitus kuvaa koko toteutuksen HTML: ssä, CSS: ssä ja JavaScriptissä. Voit tarkistaa lähdekoodin Githubista.