Créer des listes déroulantes à choix multiples avec jQuery

Date de publication : 12 mars 2009

Par Cory S.N. LaViska (Auteur)
 Pierre Schwartz (Traducteur)
 

Cet article est la traduction de l'article jQuery MultiSelect visible en ici. Retrouvez toutes les traductions disponibles de A Beautiful Site sur abeautifulsite.developpez.com.
jQuery MultiSelect est un plugin configurable pour jQuery. Il a été conçu pour transformer des formulaires à sélections multiples en une simple liste déroulante conviviale. Regardez la démo pour voir un exemple.
Ce projet a été inspiré par l'outil de multisélection de arco90, mais a été entièrement réécrit pour le rendre plus facile à manipuler, plus accessible et pour diminuer la longueur du code.
Ce projet est en phase de béta test et n'est pas encore prêt pour être utilisé en production ! Regardez la TODO list pour plus d'information.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

I. Caractéristiques
II. Compatibilité
III. Démo
IV. Téléchargement
V. Utilisation
V-A. Dépendances
V-B. Mise en application
V-C. Configuration
V-D. Définition des styles
V-E. Callback
VI. Liste de choses à faire
VI-A. Que manque-t-il ?
VI-B. Désagréments connus
VI-C. Différences connues sous IE 6
VII. Licence et conditions d'utilisation


I. Caractéristiques

  • Produit du code valide XHTML ;
  • Entièrement paramétrable par CSS ;
  • Simple à configurer et utiliser ;
  • Gestion propre des objets ;
  • Raccourcis claviers pour maximiser l'accessibilité ;
  • Option "Tout sélectionner" pour le confort d'utilisation.

II. Compatibilité

jQuery MultiSelect fonctionne avec tous les navigateurs supportant jQuery. Il a été testé avec succès avec :

  • Internet Explorer 6 & 7 ;
  • Firefox 2 & 3 (béta) ;
  • Safari 3 ;
  • Chrome (béta) ;
  • Opera 9.

III. Démo

Regardez la démo de jQuery MultiSelect.


IV. Téléchargement

Version courante : Version 1.0 béta (5 avril 2008)
Ce plugin est fourni tel quel, entièrement gratuit. Si vous voulez soutenir son développement, vous pouvez donner la somme que vous voulez via PayPal. Comme d'habitude, vous êtes les bienvenus pour contribuer à la correction des bugs et à l'enrichissement des fonctionnalités. Quoi que vous choisissiez, merci de nous soutenir dans nos efforts !


V. Utilisation


V-A. Dépendances

jQuery MultiSelect nécessite jQuery 1.2 ou plus et le plugin jQuery Dimensions.


V-B. Mise en application

Dans sa forme la plus simple, vous pouvez créer une zone de sélection multiple en utilisant le code suivant : 

$(document).ready( function() {
    $("#control_id").multiSelect();
});
où #control_id est l'identifiant de l'élément select qui existe dans votre page. Vous pouvez prendre n'importe quel sélecteur jQuery valide pour identifiant, mais assurez-vous de ne positionner l'attribut multiple="multiple" que sur des éléments select pour obtenir le résultat excompté.


V-C. Configuration

Les paramètres sont passés dans un objet JSON à la fonction multiSelect(). Les options valides sont :

Paramètre Description Valeur par défaut
selectAll Afficher ou non l'option "Tout sélectionner" true
selectAllText Texte à afficher pour sélectionner/désélectionner toutes les options simultanément. 'Select All'
noneSelected Texte à afficher quand aucun élément n'est sélectionné 'Select options'
oneOrMoreSelected Texte à afficher quand un élément de la liste ou plus sont sélectionnés (note : vous pouvez utiliser % comme un motif de remplacement pour nombre d'éléments sélectionnés). Prenez * pour afficher une liste de tous les éléments séparés par des virgules. '% selected'
Pour créer une zone de sélection multiple avec plusieurs paramètres, votre code ressemblera à quelque chose comme : 

$(document).ready( function() {
    $("#control_id").multiSelect({
      selectAll: false,
      noneSelected: 'Sélectionnez des éléments!',
      oneOrMoreSelected: '% options sélectionnées'
    });
});

V-D. Définition des styles

Le plugin MultiSelect s'appuie à 100% sur des feuilles de style. Pour fournir à vos utilisateurs une agréable expérience utilisateur, vous devez soit utiliser la feuille de style incluse dans la démo, soit créer la vôtre. Référez-vous à jqueryMultiSelect.css pour modifier les styles.


V-E. Callback

Si vous spécifiez une fonction callback, le contrôle de sélection multiple l'appellera chaque fois qu'une case à cocher changera d'état. Actuellement, la fonction passe la case à cocher qui a été cliquée comme un objet jQuery. Votre code ressemblera à quelque chose comme ça si vous définissez une fonction callback : 

$(document).ready( function() {
    $("#control_id").multiSelect(options, function() {
        alert('Quelque chose a été coché!');
    });
});
où options vaut soit null, soit un objet JavaScript (voir le paragraphe sur le paramétrage).


VI. Liste de choses à faire

Etant donné que jQuery MultiSelect est encore en phase de tests, la todo liste est mise à jour régulièrement. Pour ajouter quelque chose à la liste ou pour contribuer au projet d'une manière ou d'une autre, contactez-moi en passant par notre formulaire de contact.

Toutes les contributions que vous apporterez à ce projet seront portées à votre crédit, même si vous devez accepter que le code que vous fournirez soit placé sous la même licence que le projet jQuery MultiSelect.


VI-A. Que manque-t-il ?

  • Masquer la liste de sélection sur un clic à l'extérieur de la liste de sélection ;
  • Retirer la sélection d'un élément quand cet élément obtient le focus ;
  • L'option "Tout sélectionner" doit être cochée si toutes les options sont cochées manuellement ;

VI-B. Désagréments connus

Quand la liste d'éléments défile, les raccourcis clavier n'appellent pas le suivi de la sélection par la barre de défilement.


VI-C. Différences connues sous IE 6

  • Bug de l'affichage des éléments select (voici une solution possible qui peut être utilisée dans votre HTML/CSS) ;
  • max-height ne fonctionne pas (propriété CSS non supportée) ;
  • Le clic sur le nom des options ne coche pas la case correspondante (comportement normal du navigateur).

VII. Licence et conditions d'utilisation

jQuery MultiSelect est placé sous licence Creative Commons License. ©2008 Tous droits réservés, Cory S.N. LaViska.



               Version PDF (Miroir)   Version hors-ligne (Miroir)
(1) Cet article a été publié à l'origine, le 6 Avril 2008, en version anglaise et est visible à l'adresse suivante : jQuery MultiSelect

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.