Multi.js - Une boîte de sélection conviviale construite sur JavaScript
Sélectionner les menus sont primitifs mais ils fonctionnent. Il en va de même pour toutes les entrées de formulaire typiques telles que cases à cocher et boutons radio.
Il est facile de créer vos propres formulaires mais reconstruire des éléments d'interface à partir de zéro peut être difficile. C'est pourquoi Multi.js est un plugin si précieux pour remplacer les cases de sélection par défaut.
Avec Multi.js, vous donner aux visiteurs une liste d'éléments à choisir avec une fonctionnalité de sélection multiple intégrée dans le formulaire. De cette façon, les utilisateurs peuvent cliquez sur plusieurs éléments sans compter sur les cases à cocher.
Ce script même prend en charge une fonction de recherche, afin que les utilisateurs puissent rechercher des éléments si la liste est particulièrement longue.
Je trouve aussi le menu assez intuitif, donc ça n'a pas besoin de beaucoup d'explications. Vous cliquez sur un élément du côté gauche pour l’ajouter à la colonne de droite (ou “choisi” articles). Ensuite, cliquez sur les éléments de la colonne de droite pour les supprimer..
Tout tourne sur JavaScript vanille, y compris la fonction de recherche, de sorte que vous n'avez pas besoin de dépendances. Bien que supporte jQuery si votre site utilise cette bibliothèque.
Tout ce dont vous avez besoin est le fichier Multi.js et la feuille de style CSS. Ensuite, vous venez créer un élément et cibler l'élément avec une fonction JavaScript, ainsi:
var select_element = document.getElementById ('your_element_ID'); multi (select_element); En ce moment, le plugin ne supporte pas optgroups mais cette fonctionnalité est en cours.
De toute façon, la fonctionnalité par défaut est magnifique. Cela fonctionne comme vous vous en doutez et ça prend même en charge les dispositions réactives mobiles.
Pour en savoir plus, consultez la Repo GitHub lequel comprend également des fichiers téléchargeables. Le multi.js page de démonstration est super pour voir comment ce plugin fonctionne dans le navigateur. Mais vraiment, c'est juste un moyen simple de relooker vos menus sélectionnés tout en améliorant l'expérience utilisateur globale de votre formulaire.
