Comparaison de plugins JS : les select widgets

Beaucoup de plugins existent pour rendre plus beaux ou plus pratiques les éléments HTML select, petite comparaison pour choisir le bon

Le blog Makina-corpus

Beaucoup de plugins existent pour rendre plus beaux ou plus pratiques les éléments HTML select, petite comparaison pour choisir le bon

Nos amis graphistes pensent parfois qu'avoir des listes déroulantes (et donc leurs options) aux couleurs de votre charte graphique est un jeu d'enfant, or en 2016 il est encore difficile de plier l'affichage des éléments de formulaires, qu'il s'agisse de checkbox, select ou encore de boutons radio.

Des propriétés CSS telles que "appearance" font tranquillement leur chemin mais leur support par les navigateurs et très faible et laissent peu de place à la personnalisation. Prenons comme exemple ce que l'on peut faire en CSS3 : http://cssdeck.com/labs/styling-select-box-with-css3, l'utilisation de propriétés préfixées par le navigateur montre bien que nous sommes en cours de standardisation.

Il ne reste plus qu'à trouver un plugin JavaScript qui fasse le boulot, l'avantage étant que cela permet d'amener d'autres fonctionnalités à un select : recherche, tagging, chargement des options en ajax, templating des options.

Voici donc pour vous y retrouver les principales bibliothèques mises côte à côte selon des critères pouvant vous aider dans votre choix :

  • navigation au clavier : donne une bonne indication de la qualité de l'intégration
  • accessibilité : et comme navigation au clavier ne veut pas dire accessible, ce critère précise la présence d'attributs ARIA
  • facilité de theming : ceci précise si le design utilise un préprocesseur spécifique (LESS/SASS) ou la difficulté à écrire du CSS pour le plugin
  • thèmes : si le widget fournit une intégration de base avec différents frameworks CSS
  • templating des options : il peut souvent être utile d'avoir des options dont le HTML est différent
  • ajax : si la liste d'options peut être chargée par une requête asynchrone
  • recherche : si une fonctionnalité de recherche est présente dans le champ
  • tagging : si une fonctionnalité de création d'option à la volée est présente dans le champ
  • taille minifiée : si la performance réseau est votre critère
  • activité : précise l'activité de maintenance du plugin sur Github
  • i18n/RTL : support des diacritiques et de la lecture de droite à gauche
  • programmation : facilité de travailler avec et étendue des options et API du plugin
  • fallback mobile : si le plugin ne remplace *pas* la sélection native en mobile, souvent plus pratique
  • responsive : si le plugin n'est pas trop fixe en CSS et permet de s'adapter à la taille de son conteneur
  • tests : la présence de tests est souvent gage de qualité
  • npm/bower : si le plugin s'expose à la communauté

Je vous conseille de bien prendre en compte tous les critères, car si par exemple select2 est le plugin qui sort du lot, il est aussi le plus lourd, il sera donc approprié en cas d'utilisation poussée, mais si vous souhaitez uniquement charter vos select sur Bootstrap3 en restant accessible, je vous conseillerais Bootstrap-Select.

Nom de la bibliothèque Select2 Chosen Selectize SelectBoxIt Dropkick FancySelect Select Inspiration Bootstrap Select Zelect Sumo Select Selectator Selectric
Version 4.0.3 1.5.1 0.12.1 3.8.1 2.1.8 1.1.0 1.0.0 1.10.0 0.0.9 3.0.2 1.11.0 1.9.6
Dépendances jQuery jQuery ou Prototype jQuery jQuery
jQuery UI
Widget
jQuery en option jQuery ou Zepto Aucune jQuery
Bootstrap Dropdown
jQuery jQuery jQuery jQuery
Navigation
au clavier
Oui Oui Oui Oui Oui Oui Oui Oui Non Oui Oui Oui
Accessibilité Oui Non Non Oui Oui Non Non Oui Non Non Non Non
Facilité theming SASS SASS LESS SASS Moyen Facile Moyen LESS/SASS Facile Difficile Stylus SCSS
Thèmes Bootstrap 3
Flat UI
Metro UI
Non Bootstrap 3 Bootstrap
jQueryUI
jQuery Mobile
Non Aucun Aucun Bootstrap Nu Aucun Aucun Nombreux
Templating
des options
Oui Non Non Oui Non Oui Non Oui Oui Non Non Oui
Dépot Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien
Demo Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien Lien
Ajax Oui Non Non Non Non Non Non Non Oui Non Non Oui
Recherche Oui Oui Oui Non Non Non Non Oui Oui Oui Oui Non
Tagging Oui Oui Oui Non Non Non Non Non Non Non Non Non
Taille minifiée 65.1 Ko 28 Ko 36.3 Ko 24.8 Ko 16.8 Ko 1.2 Ko 1.4 Ko 32.5 Ko 2.0 Ko 11.5 Ko 9.7 Ko 10.1 Ko
Activité +++ ++ ++ - ++ + - ++ - + - -
i18n/RTL Oui Oui Oui Non Non Non Non Oui Non Non Non Oui
Programmation +++ + ++ +++ + + - ++ + + + ++
Compatibilité IE IE8+ IE9+ IE8+ IE8+ IE7+ IE7+ IE7+ IE8+ IE7+ IE8+ IE8+ IE7+
Fallback Mobile Non Oui Non Oui Non Oui Non Oui Non Oui Non Oui
Responsive Oui Oui Oui Non Oui Non Oui Oui Oui Oui Non Oui
Tests Oui Non Oui Oui Oui Non Non Non Oui Non Non Oui
NPM/Bower Oui Oui Oui Oui Oui Non Non Oui Oui Oui Non Oui
Licence MIT MIT Apache MIT MIT MIT Libre MIT WTFPL MIT MIT MIT

Formations associées

Front-end

Développement d'applications JavaScript

A distance (foad) Du 25 au 28 janvier 2022

Voir la formation

Actualités en lien

Image
Logo Cypress
11/10/2021

Retour d’expérience : tests fonctionnels avec Cypress

Dans le cadre d'un de nos projets de développement spécifique, l’équipe Makina Corpus a été amenée à coder un important logiciel métier avec de nombreuses entités et règles de gestion : l’Hydroportail.

Voir l'article
29/03/2019

Des boucles de composants génériques avec Angular

Ou comment faire des composants de listes réutilisables avec n'importe quel objet.

Voir l'article
Image
IA_Angular_Universal
08/10/2018

Mettre en place Angular Universal avec Angular 6 et 7

Le fonctionnement d'Angular Universal expliqué. Toutes les étapes de mise en place détaillées. Les pièges à éviter.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus