Multi.js - En brukervennlig velg boks bygget på vanlig JavaScript
Velg menyer er primitiv, men de jobber. Det samme gjelder for alle typiske forminnganger som boksene og radioknapper.
Det er enkelt å lage dine egne skjemaer, men gjenoppbygge grensesnittelementer fra grunnen av kan være tøft. Derfor Multi.js er et så verdifullt plugin for erstatter standard velg bokser.
Med Multi.js, du gi besøkende en liste over elementer å velge mellom med en multi-select-funksjon innebygd i skjemaet. På denne måten kan brukerne klikk på flere elementer uten å stole på avmerkingsboksene.
Dette skriptet selv støtter en søkefunksjon, slik at brukerne kan søke etter varer hvis listen er spesielt lang.
Jeg finner også menyen ganske intuitiv, så det trenger ikke mye forklaring. Du klikker på et element på venstre side for å legge det til høyre kolonne (eller “valgt” elementer). Deretter klikker du på elementer i den høyre kolonnen for å fjerne dem.
Alt går på vanilla JavaScript, inkludert søkefunksjonen, slik at du ikke trenger noen avhengigheter. Selv om det støtter jQuery hvis nettstedet ditt bruker det biblioteket.
Alt du trenger er Multi.js-filen og CSS-stilarket for å følge med. Neste, du bare lage en element og mål elementet med en JavaScript-funksjon, som så:
var select_element = document.getElementById ('your_element_ID'); multi (select_element); Akkurat nå, plugin støtter ikke optogrupper men denne funksjonen er i verkene.
Uansett er standardfunksjonen fantastisk. Det fungerer som du forventer og det Selv støtter mobile responsive layouter.
For å lære mer, sjekk ut GitHub repo hvilken inkluderer også nedlastbare filer. Multi.js demo side Det er flott å se hvordan dette pluginet fungerer i nettleseren. Men egentlig, det er bare en enkel måte å restyler dine valgte menyer samtidig som du forbedrer skjemaets generelle brukeropplevelse.
