Comment créer une interface sélectionnable dans CSS3

Ce qui permet de choisir parmi une liste d'éléments de CSS3 réduit le risque que l'utilisateur entrera des informations incorrectes. Heureusement, HTML5 vient déjà avec un certain nombre de contrôles de sélection, mais vous pouvez constater que ces contrôles ne répondent pas tout à fait à vos besoins à la fois.

Dans ce cas, une technique de sélection personnalisé mis en place avec jQuery UI pourrait répondre à la nécessité. Une séquence de sélection peut consister en un

balises, comme montré ici. (Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 Interactions dossier de la Code téléchargeable comme SelectContent.HTML).

Rouge
Couleur verte



Bleu
Violet

Notez que le

balises agissent comme des éléments contenus dans le récipient. (L'exemple inclut des styles CSS pour formater chacun des sélecteurs, comme l'utilisation d'un fond rouge pour l'élément rouge - un style #Selections définit la largeur des sélecteurs, avec la marge et le rembourrage utilisé pour les afficher.)

Peu importe comment vous mettre en œuvre votre liste personnalisée (et il ne doit pas être l'agencement représenté), il doit avoir un arrangement récipient / élément comme celui représenté ici. Lorsque vous avez l'arrangement en place, vous pouvez créer un mécanisme de sélection et de suivi comme celui illustré dans le code suivant:

// Créer un tableau pour suivre les sélections de selections.var = new Array () - // Manipulez les sélectionne et désélectionne $ (function () {$ ("#") Sélections sélectionnable ({sélectionné:.. Function (event, ui ) {// Vérifier l'élément n'a pas déjà été // added.if (Selections.indexOf (ui.selected.id) == - 1) // Ajouter l'id de l'élément sélectionné // aux array.Selections. poussoir (ui.selected.id) -}, non sélectionné: function (event, ui) {// Trouver l'emplacement de l'élément // non sélectionné dans le array.var Index = Selections.indexOf (ui.unselected.id) - / / Suppression que item.Selections.splice (Index, 1) -}}) -}) // Afficher les ShowResults de results.function () {alert ("Vous avez choisi:" + Selections) -}

Le tableau, Sélections, garde la trace de la liste de sélection actuelle. Pour rendre le

Le gestionnaire d'événements non sélectionné doit effectuer deux tâches. Premièrement, il doit localiser l'élément non sélectionné selon la méthode indexOf (). Deuxièmement, il doit utiliser épissure () pour supprimer cet article à partir de sélections.

Cet exemple ne fournit aucune sortie de fantaisie, mais vous pouvez voir par vous-même comment bien 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énement ShowResults () affiche une liste des sélections pour vous. Dans une application de production, vous pourriez traiter aussi facilement chacun des éléments sélectionnés.

Un morceau final à cette application particulière 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 #Selections le style .ui-sélectionné, comme indiqué ici:

#Selections .ui-Sélectionné {background: noir couleur: blancs}

Quand un utilisateur sélectionne un élément, le fond devient noir avec du texte blanc afin que l'utilisateur peut voir un changement visuel. Vous pouvez également modifier le texte comme un deuxième moyen d'aider l'utilisateur à voir la sélection.