Articles

Sådan oprettes en brugerdefineret Multi Select Dropdown

HTML giver en indfødt måde at oprette en valgboks, der understøtter valg af flere elementer med multiple-attributten på select-elementer, men gengivelsen af dette er virkelig ikke særlig kompakt eller smuk, og der er heller ikke meget, du kan gøre med hensyn til styling af mulighederne i en valgboks. Jeg kunne ikke finde nogen brugerdefinerede designs, der passede til den stil, jeg ledte efter, så jeg endte med at lave mit eget. Den fulde kode er tilgængelig på min GitHub her sammen med en matchende søgebjælke.

Dette er bygget fra bunden på grund af vanskeligheder med at ændre adfærd og stil for et normalt select. Den normalt synlige del af select er en simpel knap. Dropdown-menuen er en div skjult af Bootstrap-værktøjsklassen d-none, med afrunding og skygge anvendt via Bootstrap-værktøjsklasserne shadow og rounded. Valgmulighederne er enkle afkrydsningsfelter med etiketter. Disse kunne erstattes med radioknapper, hvis du ønskede en matchende enkelt valgboks.

Her er den endelige HTML for knappen og menuen

<div> <button onclick="dropDown(event);" class="menu-btn" type="button"> Menu 1 &#9013; </button> <div class="d-none shadow rounded menu"> <span class="d-block menu-option"><label><input type="checkbox">&nbsp; Option 1</label></span> <span class="d-block menu-option"><label><input type="checkbox">&nbsp; Option 2</label></span> <span class="d-block menu-option"><label><input type="checkbox">&nbsp; Option 3</label></span> </div></div>

Enter fullscreen mode Exit fullscreen mode

Jeg ønskede, at menuknappen skulle være afrundet og ret lille, så jeg stylede den i overensstemmelse hermed (du kan selvfølgelig style, som du vil, det påvirker ikke funktionen overhovedet):

.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}

Enter fullscreen mode Exit fullscreen mode

Til selve menuen tilføjede jeg lidt padding, så teksten ikke løb op mod toppen af menuen, og lidt margin, så den ikke overlappede med knappen (begge dele er helt valgfrit). Jeg tilføjede også et højt z-index (så den vises over andre ting), en baggrundsfarve (standard er gennemsigtig, hvilket ser fjollet ud i denne sammenhæng) og satte position til absolut, så den ikke skubber andre ting nedad på siden.

.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}

Enter fullscreen mode Exit fullscreen mode

For menupunkterne tilføjede jeg lidt padding for at adskille dem.

.menu-option { padding: 6px 20px 6px;}

Enter fullscreen mode Exit fullscreen mode

Vi har brug for en måde at registrere, når der klikkes uden for dropdown-menuen, så den kan afvises ved at klikke uden for den ligesom et normalt valgfelt. Jeg har gjort dette ved at oprette en div, der dækker hele skærmen med et lavere z-index end menuen. På den måde kan vi registrere alle klik uden for menuen

<div class="d-none" onclick="hide(event)"></div>

Enter fullscreen mode Exit fullscreen mode

#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;}

Enter fullscreen mode Exit fullscreen mode

For at få dette til at fungere rent faktisk har vi brug for JavaScript-funktioner til at få menuerne og overlejringen til at blive vist og forsvinde.
Denne funktion fjerner d-none-klasserne fra menuen og overlayet og aktiverer dem. I stedet for at håndtere dette via ID, tager den simpelthen det andet element i målets (knappens) overordnede element og antager, at det er menuen. Dette er grunden til, at menuen og knappen er indpakket i en ellers tom div.

function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}

Enter fullscreen mode Exit fullscreen mode

Denne funktion tilføjer d-none-klassen til overlayet og alle elementer med klassen menu, hvorved de skjules.

function hide(event) { var items = document.getElementsByClassName('menu'); for (let i = 0; i < items.length; i++) { items.classList.add("d-none"); } document.getElementById("overlay").classList.add("d-none");}

Enter fullscreen mode Exit fullscreen mode

Hvis du fandt dette nyttigt, vil du måske også kunne lide mit design af en matchende søgelinje.

Skriv et svar Annuller svar