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 :
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.