Multi.js - En användarvänlig Select Box Byggd på Plain JavaScript
Välj menyer är primitiva men de arbetar. Samma sak gäller alla typiska forminmatningar som kryssrutor och radioknappar.
Det är lätt att skapa egna formulär men återuppbygga gränssnittselement från början kan vara tufft. Det är därför Multi.js är en sådan värdefull plugin för ersätter standardmarkeringsrutor.
Med Multi.js, du ge besökare en lista över objekt att välja på med en multi-select-funktion inbyggd i formuläret. På så sätt kan användarna klicka på flera objekt utan att lita på kryssrutor.
Detta skript även stöder en sökfunktion, så användarna kan söka efter objekt om listan är särskilt lång.
Jag hittar också menyn ganska intuitiv, så det behöver inte mycket förklarande. Du klickar på något objekt på vänster sida för att lägga till det i den högra kolumnen (eller “vald” objekt). Klicka sedan på objekt i den högra kolumnen för att ta bort dem.
Allt går på vanilj JavaScript, inklusive sökfunktionen, så att du inte behöver några beroenden. Även om det stöder jQuery om din webbplats använder det biblioteket.
Allt du behöver är Multi.js-filen och CSS-stilarket att följa med. Nästa, du bara skapa en element och rikta in elementet med en JavaScript-funktion, såhär:
var select_element = document.getElementById ('your_element_ID'); multi (select_element); Just nu, plugin stöder inte optgrupper men den här funktionen är i verken.
Hur som helst är standardfunktionen fantastisk. Det fungerar precis som du förväntar dig och det även stöd för mobila responsiva layouter.
För mer information, kolla in GitHub repo som innehåller även nedladdningsbara filer. Multi.js demo sida Det är bra att se hur det här pluginet är fungerar i webbläsaren. Men det är bara ett enkelt sätt att restylera dina valda menyer samtidigt som du förbättrar din formulärs övergripande användarupplevelse.
