Jeder ist vielleicht mit dem Formular "Dropdown-Listen aus Select List" vertraut, aber das Standard-Dropdown-List-Formular für die Standard-Dropdown-List fühlt sich häufig hässlich an und es ist schwierig, den Stil des SELECT mit CSS anzupassen. Daher erstellen viele Websites ausgewählte Dropdown-Formulare, die mehr mit dem Website-Stil entsprechen, und verwenden häufig JS, um diesen Effekt zu simulieren.
Beispielsweise sind die Tudou.com, die Taobao Mall und Amazon alle mit JS hergestellten Dropdown-Listenformulare.
Das Ergebnis davon ist offensichtlich visuell einheitlich mit dem Gesamtstil der Website, und der Dropdown-Listenstil ist sehr schön, bringt aber auch einige nachteilige Reaktionen mit sich. Da es mit JS gemacht wird, wird es auf viele unerwartete Effekte stoßen. Lassen Sie uns ihre jeweiligen Defekte über die drei Websites des Tester analysieren:
Durch das Auswahlfeld der Suchkategorie für Kartoffeln fühle ich mich jedes Mal komisch, wenn ich klicke:
1. Nach dem Klicken unterscheidet sich die Popup-Liste von dem, was Sie erwarten. Unbewusst war es eine Dropdown-Liste, aber Kartoffel gab mir eine Mid-Down-Liste.
2. Verwenden Sie die Auf-/Ab -Tasten, um gewohnheitsmäßig auszuwählen, aber die gesamte Seite wird gescrollt.
3. In Wut musste ich es nicht mehr schließen. Drücken Sie die ESC -Taste, aber es gibt keine Antwort.
4. Nach dem Deaktivieren von JS ist es völlig nicht verfügbar.
Ebenso sieht die Taobao Mall wunderschön aus:
Mit Ausnahme von Punkt 1 ist alles andere wie Kartoffeln mit Zugangs- und Verfügbarkeitsproblemen.
Die Lösung ist sehr einfach. Verwenden Sie einfach eine native Auswahlbox wie Amazon:
Warum wird nicht empfohlen, benutzerdefinierte Auswahlfelsen auf Webseiten zu verwenden?
Das Feld auswählen, ist eine sehr reife interaktive Steuerung. Reife bedeutet, dass Benutzer leicht zu akzeptieren sind, aber Reife bedeutet auch, dass sie rücksichtsvoll sind und sehr reichhaltige interaktive Details haben. Zum Beispiel: Reaktion auf Tastaturvorgänge wie PGUP/PGDN, Home/End und die Popup-Richtung der Dropdown-Liste können automatisch an verschiedenen Positionen usw. angepasst werden.
Die Verwendung von JS zum Simulieren von Auswahlboxen erfordert viel Arbeit und akribische Tests. Auch wenn das Unternehmen investieren bereit ist, kann es einige Funktionen native Kontrollen nicht implementieren. Zum Beispiel: In der obigen Amazon-Auswahlbox habe ich den Browser auf ein sehr niedriges Niveau gezogen, und die Dropdown-Liste kann außerhalb des Browsers erweitert werden.
Für ein kleines visuelles Dessert dauerte es so viele praktische Details, um die Interaktion so viel Zeit zu verlieren, und es dauerte viel Zeit für den Front-End-Programmierer, aber es war undankbar, was wirklich schlecht war.
PS: Um ein benutzerdefiniertes Auswahlfeld zu verwenden, müssen die folgenden Bedingungen erfüllt sein:
1. So verrückt wie Google, bereit, viel Zeit und Ressourcen zu verbringen.
2. So akribisch wie Google, machen Sie es gut und simulieren Sie es gründlich.
3. Bewerben Sie sich in der Web -App.
Leider sind im Land Unternehmen, die so verrückt und akribisch sind, wie Google oder Facebook noch nicht erschienen sind.