Les boutons de saisie sont utilisés dans les formulaires Web où un utilisateur doit sélectionner une option dans une collection plus grande. Cela se produit souvent avec des valeurs uniques telles que les abonnements à la newsletter, les paramètres de profil et les catégories de soumission. J'ai toujours aimé les boutons de saisie de style Digg à l'ancienne, dans lesquels vous cliquez sur un lien pour choisir votre catégorie d'histoire.
Dans ce tutoriel, je veux montrer comment nous pouvons construire une interface similaire en utilisant CSS3 et jQuery. Tous les boutons radio d’entrée sont toujours présents dans le formulaire lui-même, mais ils sont masqués sur la page. Au lieu de cela, nous mettons à jour le choix sélectionné à l'aide de JavaScript et avons même la possibilité d'afficher cette valeur en HTML (ou de la renvoyer dans un script backend). Consultez mon exemple de démo pour avoir une idée de ce que nous construisons.
Live Demo - Télécharger le code source
Construire la page Web
Nous devons d’abord télécharger une copie locale de jQuery et inclure un lien vers un document CSS externe nommé styles.css. Le code JS n'est pas trop compliqué, mais vous pourriez en bénéficier en les déplaçant dans un fichier .js séparé. Cela dépend si votre site nécessite des scripts supplémentaires qui réduiraient le temps de rendu de la page.
Le corps de page intérieur contient maintenant un petit nombre de pièces importantes. Nous avons une portée en utilisant l'ID #radiovaltxt c'est comment j'affiche l'entrée sélectionnée. Lorsqu'un utilisateur clique sur l'un des liens de page, cette valeur de plage est mise à jour avec la valeur d'entrée actuellement sélectionnée. En dessous de celui-ci, j'ai créé un nouveau formulaire qui ne charge rien. Il s'agit plutôt d'un espace réservé permettant de voir à quoi le code HTML devrait ressembler.
Vous trouverez le div #radiobtns contient un certain nombre de lignes div contenant en outre des listes d'éléments non ordonnées. Chaque ligne est basée sur un seul sujet de catégorie et l'utilisateur peut sélectionner l'une des options pour marquer la catégorie sélectionnée. Je n'ai copié que sur une rangée de liens, mais leur structure est très similaire.
Un élément important à comprendre est que l'ID du lien d'ancrage correspond à la valeur du bouton d'entrée correspondante. Voici comment déterminer quel lien a été cliqué et comment il correspond à la sélection de la radio. Vous trouverez ces entrées réelles situées dans une div #fullradios au bas du formulaire.
Je les ai cachés par défaut et le but est de ne jamais les montrer sur la page. Si les utilisateurs peuvent interagir avec notre propre interface personnalisée, ils n'auront jamais besoin de manipuler les entrées radio. Certes, nous pourrions construire les entrées liées à une étiquette qui ne nécessite aucun jQuery. Mais l'effet est également plus difficile à exploiter et nécessite des navigateurs Web compatibles CSS3.
Styliser les liens du chat
Ma feuille de style par défaut comprend toutes les réinitialisations et la structure de page habituelles habituelles. Les champs de saisie sont masqués à l'aide de affichage: aucun en ciblant l'élément div parent. De plus, le texte d'étendue est conçu pour apparaître naturellement centré vers le haut de la page. Vous n'utiliserez probablement pas cela sur un site Web actif, mais transmettez la valeur au formulaire à l'aide d'un champ masqué.
Chaque ligne a une seule liste non ordonnée et le tout premier élément reçoit une classe de .parent. Voici comment j'ai organisé la liste des catégories. L'élément parent lui-même n'est pas un lien désigné vers toute entrée. Vous pouvez modifier cela dans votre propre conception, mais il est plus logique d'utiliser un type d'étiquette de catégorie parent pour définir les choix. Une largeur fixe de 110px est attribuée à cet élément parent afin de laisser plus d’espace entre les liens.
J'ai aussi écrit une classe notable de .sel qui est appliqué sur l'élément de lien sélectionné. Une fois qu'un utilisateur a cliqué sur l'une des valeurs de lien, nous avons besoin de savoir qu'il a été sélectionné et confirmé. Cette classe sélectionnée sera supprimée et réappliquée sur de nouveaux liens à mesure que l'utilisateur bascule entre les catégories.
Sélection d'entrée avec jQuery
Pour sélectionner et désélectionner manuellement les boutons radio, vous devez vous familiariser un peu avec jQuery. Il existe de nombreuses questions populaires sur Stack Overflow qui traitent de cette idée, et les techniques ont changé au fil des différentes itérations de la bibliothèque de jQuery. Ce script est situé au bas de la page index.html et je le décompose en segments pour une compréhension plus facile.
Chaque fois qu'un utilisateur clique sur l'un de ces liens, nous utilisons immédiatement event.preventDefault () en transmettant la variable d'événement click. Cela arrête le chargement de la valeur HREF et empêche le saut de page associé aux liens hachés. La variable catid est une chaîne formée dans la syntaxe d'un sélecteur jQuery.Il prend l'identifiant de lien et le reformule dans la valeur d'identifiant de l'entrée radio correspondante. L'autre variable checkinput obtient la valeur de la radio actuellement sélectionnée - si rien n'est sélectionné, nous obtenons une valeur de retour indéfinie.
Nous pouvons donc maintenant entrer plus dans le code logique en vérifiant d’abord si rien n’est déjà sélectionné. Dans ce cas, nous utilisons la méthode .prop () de jQuery pour définir la propriété vérifiée. Sinon, nous ciblons chaque radio en utilisant entrée [nom = 'catégorie'] et supprimez l’option cochée pour qu’elle ne redevienne aucune sélection. Ensuite, nous mettons à jour en fonction du dernier lien radio cliqué.
Ensuite, je crée une autre variable Newval qui vérifie à nouveau la valeur radio actuellement sélectionnée. Si cette valeur correspond à l'ID du lien, nous savons qu'il a été vérifié avec succès et nous affichons la nouvelle valeur en HTML. Cette étape ne sera probablement utile sur aucun site de production en direct, mais il est agréable que cette démo voie comment tout fonctionne en arrière-plan.
Ce dernier morceau de code traite de la mise à jour du lien actuellement sélectionné. Si le lien actuel a déjà un .sel classe alors il a déjà été sélectionné et nous ne faisons rien. Sinon, il est plus facile de cibler chaque lien à l'intérieur #radiobtns et en supprimant la classe, pour mettre à jour notre lien actuel en utilisant $ (this) .addClass ('sel').
Rappelles toi $ (ceci) est simplement un espace réservé pour tout sélecteur jQuery actuellement actif, et dans ce cas, nous parlons de l'événement click qui est effectué sur l'un des liens de catégorie.
Live Demo - Télécharger le code source
Je peux seulement imaginer la multitude de solutions pour lesquelles les développeurs utiliseraient des entrées radio. Les techniques Web modernes offrent beaucoup de possibilités en matière de conception d'interface utilisateur. Il s'agit d'un moyen intéressant de personnaliser une expérience de bouton radio en une chose tout à fait unique.
J'espère que ce didacticiel pourra fournir des idées aux développeurs Web travaillant avec des formulaires et des champs de saisie volumineux. Vous pouvez également télécharger une copie du code source de mon tutoriel pour voir exactement comment cela fonctionne sur votre propre ordinateur.