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

| Cory S.N. LaViska | Pierre Schwartz |

Traducteur

khayyam90

Cet article est la traduction de l'article jQuery MultiSelect visible 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.

Cet article a été publié à l'origine, le 6 avril 2008, en version anglaise et est visible à l'adresse suivante : jQuery MultiSelect ♪

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

- Auteurs : Cory S.N. LaViska, Pierre Schwartz

- Traducteur : khayyam90

- Parution : 12 mars 2009

- Licence : 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 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 clavier 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 et 7 ;

- Firefox 2 et 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 escompté.

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 est sélectionné (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

Étant 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.