Un style d'interface utilisateur commun pour Apple et WordPress a été le champ de recherche en expansion. Chaque fois qu'un utilisateur clique pour faire la mise au point, le champ s'agrandit, puis se contracte lorsque l'utilisateur décentre. Cette technique est devenue populaire car elle permet de gagner de la place sur votre page lorsque la recherche n’est pas utilisée. Mais il met également en évidence le champ de recherche quand il est en cours d’utilisation, qui attire l’attention de l’utilisateur et lui permet de savoir que le site Web répond.
Dans ce tutoriel, je souhaite démontrer deux méthodes différentes pour créer un champ de recherche en expansion. La première consiste à utiliser des transitions CSS3 de base, qui ne sont prises en charge que par les nouveaux navigateurs Web. Cela fonctionne très bien pour les conceptions simples, mais il n’ya aucun moyen de vérifier si l’utilisateur a saisi les données strictement via CSS. Dans le deuxième champ, nous utiliserons JavaScript pour développer, puis nous ne réduirons que si l'utilisateur n'a pas saisi de texte. C'est un petit morceau d'interface utilisateur fascinant qui peut parfaitement se fondre dans n'importe quel projet de site Web.
Live Demo - Télécharger le code source
Construire un formulaire simple
Je ne souhaite pas que les formulaires de démonstration soumettent quoi que ce soit. J'utilise donc JavaScript pour arrêter l'événement submit. Mais le code HTML simple du document est toujours normal et assez simple. N'hésitez pas à télécharger une copie de ma démo si vous souhaitez travailler sur une copie locale du didacticiel.
Cet extrait contient tous les codes d’en-tête dont nous avons besoin dans la page HTML. J'ai inclus une copie de la bibliothèque jQuery pour un script plus rapide. Mon code JavaScript personnalisé est enregistré dans un fichier externe nommé jsinput.js. Il ne contient rien de trop complexe, mais il sera utile de comprendre comment nous complétons les différents effets via CSS et JS. Voici les deux zones de saisie avec leurs codes HTML exacts:
Les champs de recherche sont nommés #s et # s2 respectivement. Je suis resté à une convention de nommage similaire avec les éléments de formulaire et les boutons de soumission. La lecture du document CSS devrait être beaucoup plus facile, car les champs sont divisés en noms d'identifiant uniques. Mais nous pouvons d’abord examiner les transitions CSS, puis passer au champ JavaScript dynamique.
Développer avec CSS Transitions
Mon fichier CSS de démonstration contient une série de réinitialisations ainsi que des styles de base pour la création de la structure de présentation. Il n'y a rien d'extraordinaire si vous êtes familier avec CSS. Cependant, je pense qu’un bloc mérite d’être mentionné. Il s’agit en réalité du texte de substitution pour divers éléments d’entrée. Ces sélecteurs ne sont pas pris en charge par tous les navigateurs, mais nous pouvons obtenir la majorité des moteurs les plus récents avec ces codes:
Il est beaucoup plus agréable de mélanger du texte typique avec le reste de votre conception. Les propriétés CSS de chaque champ de recherche imitent un ton similaire. J'ai une classe externe nommée .conteneur qui encapsule la forme à 100% largeur. Cela signifie que le formulaire ne sera jamais étendu au-delà du conteneur de page, nous pouvons donc utiliser 100% comme maximum et tout le reste sera relatif.
Les propriétés de transition se trouvent tout en bas de la fenêtre. .searchfield classe. La propriété CSS3 commune et les préfixes de fournisseur doivent couvrir la majorité des navigateurs Web. Toutefois, si vous avez besoin d'une prise en charge de la compatibilité ascendante, l'utilisation d'une méthode JavaScript stricte produira de meilleurs résultats. Même s’il est vrai que ce code est beaucoup plus propre et plus facile à organiser.
Un dernier bit pour la zone de saisie de la recherche fixera le placement de notre icône de recherche. Celui-ci doit être positionné à la toute fin du champ de saisie, ce qui inclut également un peu de remplissage sur le côté droit. De cette façon, l'utilisateur ne peut jamais saisir de texte écrivant sur l'icône du bouton de recherche. La source originale de ce graphique provient de Icon Finder conçu par Brightmix. Le jeu d’icônes plat est parfait pour une telle entrée de champ de recherche de base.
Le principal problème de l'animation basée sur CSS est la gestion des sélections d'utilisateurs dynamiques. Lorsqu'un visiteur entre du texte dans le champ développé, il peut appuyer sur entrer ou cliquer sur la loupe. S'ils cliquent pour effectuer une recherche, cela supprimera le focus de l'entrée et le ramènera à 45%, ce qui perturbera également l'événement click. Vous pouvez choisir de modifier les propriétés de la transition et de les fixer au :concentrer Etat. Mais alors il n'y aura pas d'animation lors du redimensionnement, l'effet est encore pire.
Gestion de la saisie dynamique via jQuery
Dans mon exemple de démonstration, le deuxième champ de saisie est le seul ciblé par jQuery. Au sommet de jsinput.js J'ai créé deux variables qui sélectionnent le deuxième champ de saisie et le bouton de recherche. Il est possible de changer ces positions si vous préférez cibler le premier champ. Toutefois, il peut également être intéressant de supprimer les transitions CSS3 et de les utiliser uniquement comme méthode de secours lorsque JS est désactivé dans le navigateur.
J'ai divisé le fichier en deux gros morceaux de code. Cette première moitié contient les variables initiales ainsi que le gestionnaire d'événements focus. Chaque fois que l'utilisateur se concentre sur le deuxième champ de saisie, nous devons élargir la largeur de 100%. Nous devons également déplacer l’icône de recherche de sa position par défaut jusqu’à droite. Les deux méthodes jQuery.animate () doivent être exécutées exactement au même moment, produisant un effet d'animation très similaire à celui des transitions CSS3.
Ensuite, ce dernier morceau a deux autres événements pour la liaison. Le premier survient après que l'utilisateur ait effacé le deuxième champ de saisie. Le script va tester contre search2.val () et déterminer si l'utilisateur a entré des données. Si le champ est vide, l'animation est réduite à une largeur de 45% et l'icône est également repositionnée. Sinon, l'utilisateur a entré des termes de recherche et nous le laissons à 100% de largeur.
Le deuxième petit bloc de codes se déclenchera une fois que vous aurez essayé de soumettre des données pour l’un ou l’autre des formulaires. Il va automatiquement attraper la soumission et l'empêcher de se produire avec event.preventDefault (). Globalement, il ne devrait pas s'agir d'un script complexe, mais les développeurs qui ne connaissent pas jQuery peuvent être amenés à rechercher quelques fonctions. Les codes sont exceptionnellement petits et devraient fonctionner dans tous les navigateurs Web compatibles JS.
Live Demo - Télécharger le code source
Conclusion
Cette interface ne nécessite pas beaucoup de planification ni de code supplémentaire dans votre conception. Et même si vous conservez le même style de conception pour les champs de saisie de votre site Web, cette technique peut être réalisée à l'aide de quelques transitions CSS3 ainsi que d'un conteneur externe.
Il serait également possible de l'inclure dans un nombre quelconque de formulaires similaires, tels que des champs de contact ou des pages de paramètres de profil. Téléchargez une copie de mon code source de démonstration et n'hésitez pas à implémenter cette fonctionnalité dans un nombre quelconque de projets!