Das Erstellen einer benutzerdefinierten Auswahl-Dropdown-Komponente ist eine der häufigsten Anforderungen in der Webentwicklung. Mit der Dropdown-Liste „Auswählen“ kann der Benutzer einen Wert aus einer vordefinierten Liste auswählen. Vielleicht fragen Sie sich:

„Warum muss ich eine benutzerdefinierte Dropdown-Komponente für die Auswahl erstellen, wenn bereits ein HTML-Auswahl-Tag vorhanden ist? Ich kann ein CSS-Styling anwenden und das wars!“

Leider ist das Dropdown-Menü für die Stilauswahl nicht so einfach. Das native HTML-Auswahlelement erlaubt uns keine Styling-Options-Tags.

Heutzutage werden Auswahl-Dropdowns in vielen verschiedenen Variationen angezeigt. Sie finden verschiedene Javascript-Bibliotheken und CSS-Frameworks Sie verfügen über eine eigene Implementierung für benutzerdefinierte Auswahl-Dropdowns. Sie haben sich als browserübergreifend erwiesen und sind äußerst zuverlässig. Oft müssen Sie keine Bibliotheken oder Frameworks verwenden, da das Erstellen eines benutzerdefinierten Auswahl-Dropdowns in vielen Fällen einfach ist Aufgabe.

In diesem Blog-Beitrag möchte ich Ihnen mitteilen, wie Sie ein Dropdown-Menü für die funktionale Auswahl erstellen können, ohne Bibliotheken und Frameworks zu verwenden. Sie können das Styling anwenden, um Optionen auszuwählen und dort benutzerdefinierte Komponenten hinzuzufügen.

Bevor Sie mit der Erstellung einer benutzerdefinierten Dropdown-Liste beginnen, sollten Sie die Folgende Fragen:

Hat das Dropdown-Menü Hunderte oder Tausende von Optionen?

Können Benutzer mehrere Optionen auswählen?

In beiden Fällen müssten Sie a verwenden Bibliothek von Drittanbietern, da die eigene Implementierung viel Zeit in Anspruch nehmen kann. Wenn Sie ein Dropdown-Menü mit Hunderten von Optionen benötigen, sollten Sie den Benutzern eine Suchfunktion zur Verfügung stellen. Wenn das Dropdown-Menü Tausende von Optionen enthält, sollten Sie die „Fenster“ -Technik verwenden. Weitere Informationen finden Sie unter Erweiterte Auswahl-Dropdown-Liste.

Benutzerdefiniertes Auswahl-Dropdown-Beispiel

Hier sehen Sie das Standard-Auswahlelement kann je nach verwendetem Browser etwas anders aussehen.

In diesem Lernprogramm wird das Standardauswahlelement in Folgendes umgewandelt:

HTML

Wenn Sie ein benutzerdefiniertes Dropdown-Menü erstellen müssen, würden Sie dies traditionell tun Verwenden Sie die folgende Struktur.

Da wir das Tag select nicht verwenden können, haben wir mehr Optionen für die Auswahl der HTML-Struktur Wir können ul und li Elemente oder div mit Elemente. Entscheiden wir uns für die Struktur div und span.

Das CSS

Es ist eine gute Idee Beginnen Sie mit einem CSS-Reset, der die Inkonsistenzen des Browsers verringert. Ich habe mich für Eric Meyers CSS-Reset entschieden:

Quelle: https://meyerweb.com/eric/tools/css/reset/

Ich bevorzuge Verwenden des Box-Modells, wobei width = Elementbreite + Auffüllen + Rahmen.

Zuerst haben wir einige grundlegende Stile für HTML-Elemente hinzugefügt. <div class=”custom-select”> Position ist relativ, da für die Dropdown-Liste eine absolute Positionierung angewendet werden muss.

Das nächste CSS wird für den Dropdown-Pfeil verwendet.

Sie können den Übergang und die Transformation von CSS3-Eigenschaften sehen. Der Übergang wird zum Ein- und Ausblenden der Dropdown-Liste verwendet. Die Transformation wird zum Animieren des Pfeils verwendet, dessen Richtung den Dropdown-Status darstellt.

Das JavaScript

Sie müssen keine Bibliotheken von Drittanbietern für die Dom-Manipulation verwenden. Für eine einfache Dropdown-Liste benötigen Sie nur grundlegende Javascript-Ereignisse.

Wir haben dem Wrapper eine Klickfunktion hinzugefügt. Klicken Sie auf Funktion, um die Klasse .open umzuschalten, die angibt, ob die Optionsliste geöffnet oder geschlossen wird. Innerhalb der Klickfunktion suchen wir <div class=”custom-select”> nach this.querySelector(".custom-select"). This Die Inside-Click-Funktion repräsentiert das angeklickte Element. Wir fragen nicht das gesamte Dokument mit document.querySelector(".custom-select") ab, falls wir mehr Dropdowns im DOM haben.

Im obigen Javascript-Snippet durchlaufen wir alle Optionen und fügen einen Klick hinzu Funktion, die die ausgewählte Option durch Hinzufügen der Klasse .selected ändert. Wiederum fragen wir innerhalb der Klickfunktion innerhalb der angeklickten Option (this im Snippet) ab, falls wir die Ereignishandler ändern möchten, um mehrere Dropdowns auf einer Seite zu unterstützen.

Das letzte Snippet ist optional und ermöglicht das Schließen der Dropdown-Liste, wenn der Benutzer aus der Dropdown-Liste heraus klickt.

Mehrfachauswahl-Dropdowns auf einer Seite

Wenn Sie mehrere Auswahl-Dropdowns auf einer Seite verwenden möchten Seite müssen wir den Klick-Listener an alle .custom-select-wrapper -Elemente anhängen und alle Dropdowns schließen, wenn der Benutzer aus einem Dropdown heraus klickt.

Erweiterte Dropdown-Auswahl

Wenn Sie eine Auswahl-Dropdown-Liste mit Hunderten von Optionen oder Mehrfachauswahl benötigen, können Sie einige der verfügbaren Bibliotheken überprüfen. In diesem Artikel sehen Sie einen Vergleich der beliebtesten Bibliotheken.

Wenn Sie mit Tausenden von Optionen arbeiten müssen, können Sie kein DOM mit Tausenden von Optionselementen rendern.Wenn Sie kein Back-End verwenden können, müssen Sie die „Fenster“ -Technik verwenden.

Was ist die „Fenster“ -Technik?

Anstatt Tausende von Elementen aus einer Liste unter zu rendern Einmal konzentriert sich „Fenster“ oder Virtualisierung darauf, nur Elemente für den Benutzer sichtbar zu machen. Sie können diesen Vortrag von Brian David Vaughn über die Implementierung der „Fenster“ -Technik überprüfen, die einfach zu implementieren ist und enorme Leistungssteigerungen bringen kann.

Fazit

Ich hoffe, dieser Blog-Beitrag hilft Ihnen beim Erstellen einer benutzerdefinierten Auswahl-Dropdown-Komponente. Zunächst müssen Sie wissen, ob das Dropdown-Menü „Auswahl“ viele Optionen enthält oder ob Benutzer mehrere Optionen auswählen können. Wenn Sie eine grundlegende Auswahlkomponente benötigen, beschreibt der Blogbeitrag die gesamte Implementierung in HTML, CSS und JavaScript. Sie können den Quellcode auf Github überprüfen.