Vidéo: Tutoriel jQuery : Créer une carte interactive 2025
La possibilité de sélectionner à partir d'une liste d'éléments dans CSS3 réduit la possibilité que l'utilisateur saisisse des informations incorrectes. Heureusement, HTML5 est déjà livré avec un certain nombre de contrôles de sélection, mais vous pouvez trouver que ces contrôles ne répondent pas tout à fait à vos besoins.
Dans ce cas, une technique de sélection personnalisée implémentée avec jQuery UI peut répondre au besoin. Une séquence de sélection peut être constituée d'une et d'une série de balises
, comme indiqué ici. (Vous pouvez trouver le code complet pour cet exemple dans le dossier Chapter 06Interactions du code téléchargeable sous SelectContent.HTML.)
Rouge
Vert
Bleu
Violet
Notez que les étiquettes agissent comme un conteneur et que les étiquettes
agissent comme des éléments dans le conteneur. (L'exemple inclut des styles CSS pour formater chacun des sélecteurs, comme l'utilisation d'un arrière-plan rouge pour l'élément rouge - un style #Selections définit la largeur des sélecteurs, ainsi que la marge et le remplissage utilisés pour les afficher.)
Peu importe la façon dont vous implémentez votre liste personnalisée (et ce n'est pas forcément l'arrangement indiqué), elle doit avoir un arrangement conteneur / article comme celui-ci. Lorsque vous avez l'arrangement en place, vous pouvez créer un mécanisme de sélection et de suivi comme celui indiqué dans le code suivant:
// Créer un tableau pour suivre les sélections. var Selections = new Array (); // Gère les sélections et désélectionne. $ (function () {$ ("# Selections"). selectable ({selected: function (event, ui) {// Vérifie que l'élément n'a pas déjà été // ajouté (if (Selections.indexOf (ui. id) == -1) // Ajouter l'identifiant de l'élément sélectionné // au tableau Sélections push (ui sélectionné. id);}, non sélectionné: function (event, ui) {// Trouver l'emplacement de l'élément // non sélectionné dans le tableau var Index = Selections.index (ui.selected.id); // Supprime cet élément.Selections.cread (Index, 1);}});}) // Affiche les résultats. function ShowResults () {alert ("Vous avez sélectionné:" + Sélections);}
The Array, Selections, conserve la trace de la liste de sélection actuelle. Pour faire les, sélections, sélectionnables, vous utilisez la méthode selectable (). Cet exemple utilise deux événements, sélectionnés et non sélectionnés, pour suivre les sélections en cours. Lorsque l'utilisateur sélectionne un nouvel élément, le gestionnaire d'événements sélectionné vérifie que l'élément n'apparaît pas déjà dans Sélections, puis il pousse le nouvel élément sur Sélections.
Le gestionnaire d'événement non sélectionné doit effectuer deux tâches. Tout d'abord, il doit localiser l'élément non sélectionné à l'aide de la méthode indexOf (). Deuxièmement, il doit utiliser splice () pour supprimer cet élément de Selections.
Cet exemple ne fournit aucune sortie de fantaisie, mais vous pouvez voir par vous-même à quel point la méthodologie de sélection fonctionne. Cliquez sur Afficher les sélections pour afficher la liste des éléments sélectionnés. Le gestionnaire d'événements ShowResults () affiche une liste des sélections pour vous. Dans une application de production, vous pouvez tout aussi bien traiter chacun des éléments sélectionnés.
Un dernier élément de cette application est la nécessité de définir un style particulier. Vous devez fournir un moyen pour l'affichage d'enregistrer l'état sélectionné d'un élément particulier, ce qui signifie fournir des valeurs pour les # sélections. style sélectionné par l'interface utilisateur, comme illustré ici:
#Selections. ui-selected {arrière-plan: noir; color: white;}
Lorsqu'un utilisateur sélectionne un élément, l'arrière-plan devient noir avec du texte blanc, ce qui permet à l'utilisateur de voir un changement visuel. Vous pouvez également modifier le texte en tant que second moyen d'aider l'utilisateur à voir la sélection.
