Tout le monde peut être familier avec le formulaire de liste déroulante Select, mais le formulaire déroulant par défaut rend souvent certains sites Web, et il est difficile d'ajuster le style de la sélection avec CSS. Par conséquent, de nombreux sites Web créent des formulaires déroulants sélectionnés qui sont plus conformes au style du site Web et utilisent souvent JS pour simuler cet effet.
Par exemple, le Tudou.com, le centre commercial Taobao et Amazon sont tous des formulaires de liste déroulante réalisés avec JS.
Le résultat de cela est évidemment unifié visuellement avec le style général du site Web, et le style de liste déroulante est très beau, mais il apporte également des réactions indésirables. Parce que cela se fait avec JS, il rencontrera de nombreux effets inattendus. Analysons leurs défauts respectifs via les trois sites Web du testeur:
La boîte de sélection de la catégorie de recherche pour les pommes de terre me fait me sentir bizarre à chaque fois que je clique:
1. Après avoir cliqué, la liste contextuelle est différente de ce que vous attendez. Ce fut inconsciemment, c'était une liste déroulante, mais Potato m'a donné une liste à mi-parcours.
2. Utilisez les touches haut / bas pour choisir habituellement, mais la page entière est défilée.
3. En colère, je n'avais plus besoin de le fermer. Appuyez sur la touche ESC, mais il n'y a pas de réponse.
4. Après avoir désactivé JS, il n'est pas totalement indisponible.
De même, le centre commercial Taobao est également magnifique:
À l'exception du point 1, tout le reste est comme les pommes de terre, avec des problèmes d'accessibilité et de disponibilité.
La solution est très simple, utilisez simplement une boîte de sélection native, comme Amazon:
Pourquoi n'est-il pas encouragé à utiliser des boîtes de sélection personnalisées dans les pages Web?
La boîte de sélection sélectionnée est un contrôle interactif très mature. La maturité signifie que les utilisateurs sont faciles à accepter, mais la maturité signifie également qu'ils sont prévenants et ont des détails interactifs très riches. Par exemple: la réponse aux opérations du clavier telles que PGUP / PGDN, Home / End, et la direction contextuelle de la liste déroulante peut être automatiquement ajustée à différentes positions, etc.
L'utilisation de JS pour simuler des boîtes de sélection nécessite beaucoup de travail et des tests méticuleux. Même si l'entreprise est prête à investir, elle ne peut toujours pas mettre en œuvre certaines fonctionnalités des contrôles natifs. Par exemple: dans la boîte de sélection d'Amazon ci-dessus, j'ai tiré le navigateur à un niveau très bas, et la liste déroulante peut être étendue à l'extérieur du navigateur.
Pour un petit dessert visuel, il a fallu tellement de détails pratiques pour que l'interaction perde autant de temps, et cela a pris beaucoup de temps pour le programmeur frontal, mais c'était ingrat, ce qui était vraiment mauvais.
PS: Pour utiliser une boîte de sélection personnalisée, les conditions suivantes doivent être remplies:
1. Aussi fou que Google, prêt à passer beaucoup de temps et de ressources.
2. Aussi méticuleux que Google, faites-le bien et simulez-le soigneusement.
3. Appliquer sur l'application Web.
Malheureusement, dans le pays, les entreprises aussi folles et méticuleuses que Google ou Facebook ne sont pas encore apparues.