Multi.js - En brugervenlig Vælg boks bygget på Plain JavaScript
Vælg menuer er primitive, men de arbejder. Det samme gælder for alle de typiske formindgange som f.eks afkrydsningsfelter og radioknapper.
Det er nemt at oprette dine egne former, men genopbygning af grænsefladeelementer fra bunden kan være hård. Derfor Multi.js er sådan et værdifuldt plugin til udskiftning af standardvalgkasser.
Med Multi.js, dig give besøgende en liste over emner at vælge imellem med en multi-select-funktion indbygget i formularen. På denne måde kan brugerne klik på flere elementer uden at stole på afkrydsningsfelterne.
Dette script selv understøtter en søgefunktion, så brugerne kan søge efter varer, hvis listen er særlig lang.
Jeg finder også menuen ret intuitiv, så det behøver ikke meget forklaring. Du klikker på et element på venstre side for at tilføje det til den højre kolonne (eller “valgte” poster). Klik derefter på elementer i den højre kolonne for at fjerne dem.
Alt kører på vanilla JavaScript, herunder søgefunktionen, så du behøver ikke nogen afhængigheder. Selv om det understøtter jQuery hvis dit websted bruger det pågældende bibliotek.
Alt du behøver, er Multi.js-filen og CSS-stilarket at følge med. Derefter er du bare lave en element og mål elementet med en JavaScript-funktion, ligesom:
var select_element = document.getElementById ('your_element_ID'); multi (select_element); Lige nu, plugin understøtter ikke optogrupper men denne funktion er i værkerne.
På nogen måde er standardfunktionen fantastisk. Det virker som du ville forvente og det endda understøtter mobile responsive layouts.
For at lære mere, tjek den GitHub repo hvilken indeholder også downloadbare filer. Multi.js demo side er fantastisk til at se, hvordan denne plugin fungerer i browseren. Men det er bare en simpel måde at restylér dine valgte menuer samtidig med at du forbedrer formularens samlede brugeroplevelse.
