Erklären Sie Chosen und Select2 anhand von Beispielen

Wir können zwei jQuery-Plugins verwenden, um das Auswahlfeld zu formatieren, nämlich Select2 und Chosen. Sowohl das Select2- als auch das Chosen-Plugin verbessern das Erscheinungsbild ausgewählter Boxen und verbessern das Verhalten der Boxen, wodurch sie benutzerfreundlich werden. Darüber hinaus funktionieren beide Plugins sowohl mit mehreren ausgewählten Boxen als auch mit einer einzelnen ausgewählten Box.

Wählen

JavaScript-Plugin zum Erstellen benutzerfreundlicher Auswahlfelder. Chosen ist sowohl als Prototyp- als auch als JQuery-Version verfügbar.

Ausgewählte Funktionen

Benutzerfreundlich

Ihre Benutzer müssen sich nicht durch eine Reihe von Möglichkeiten wühlen; sie können einfach mit dem Namen dessen beginnen, wonach sie suchen. Um eine Alternative auszuwählen, müssen Sie lediglich die Eingabetaste drücken oder mit der Maus klicken. Nicht übereinstimmende Einträge werden vom Bildschirm entfernt.

Progressive Verbesserung

Da Chosen das standardmäßige HTML-Auswahlfeld ersetzt, müssen Sie keine weiteren Schritte mehr unternehmen, damit es in Browsern funktioniert, die kein JavaScript unterstützen. Das Backend verwendet auch keine Ereignisse zur Datenverwaltung.

Einfache Einrichtung

Fügen Sie einfach die ausgewählten Dateien in Ihre Anwendung ein und öffnen Sie das Plugin. Auswahlgruppen, ausgewählte Zustände, Mehrfachfunktionen und Browser-Tab-Reihenfolge werden bei der Auswahl automatisch berücksichtigt.

Wählen Sie 2

Select2 bietet Benutzern ein anpassbares Auswahlfeld, das für Suchen, Remote-Datensätze, Markierungen, unendliches Scrollen und viele andere nützliche Eigenschaften verwendet werden kann.

Die Funktionen von Select2 sind

Zusätzlich zur Unterstützung von Suche, Tagging, Remote-Datensätzen, unendlichem Scrollen und vielen anderen Optionen bietet es Benutzern auch vom Benutzer anpassbare Auswahlfelder.

RTL-Umgebung

Es unterstützt die RTL-Umgebung und verfügt über eine integrierte Suchfunktion in über 40 Sprachen.

Ajax

Mit Ajax können Sie schnell eine lange Liste von Artikeln durchsuchen.

Erstellen Sie vollständig Skinbares CSS mit Sass und optionalen Bootstrap 3-Themen.

Javascript-Bibliothek Ihrer Wahl

Um das ausgewählte Plugin in JQuery zu verwenden, müssen wir einige Bibliotheken hinzufügen, wie unten gezeigt -

• chosen.jquery.min.js

• Wählen Sie .min.css

Um das Plugin in der ausgewählten Box zu aktivieren, müssen wir außerdem den folgenden Code hinzufügen -

$(“.chosen-select”).chosen()

Der oben geschriebene Code ist ein Skript in JQuery.

Select2 JavaScript-Bibliothek

Um das Select2-Plugin in jQuery zu verwenden, müssen wir einige Bibliotheken hinzufügen, wie unten gezeigt -

• select2.min.js

• select2.min.css

Um das Plugin in der ausgewählten Box zu aktivieren, müssen wir außerdem den folgenden Code hinzufügen -

$(“.chosen-select”).select2()

Der oben geschriebene Code ist ein Skript in JQuery.

Wir haben die Grundlagen von selected und select2 verstanden, kommen wir nun zum Kern, d. h. im Kern werden wir den Unterschied zwischen ihnen beobachten.

Unterschied zwischen Chosen und Select2

Die beiden am häufigsten verwendeten Bibliotheken zum Verbessern von Auswahlfeldern sind Choose und select2. Chosen ist älter als Select2 und unterstützt jQuery und Prototype. Beide werden aktualisiert. Select2 ist von Chosen inspiriert und unterstützt nur jQuery.

Sehen wir uns den Unterschied zwischen selected und select2 an -

Daten laden

Beim Laden von Daten mit „selected“ muss der gesamte Datensatz als Options-Tag im DOM geladen werden, sodass die Handhabung kleiner Datensätze eingeschränkt ist. Select2 hingegen verwendet das Konzept von Funktionen, um Ergebnisse dynamisch zu finden, sodass die Methode select2 die Ergebnisse teilweise laden kann, wodurch die Mängel von selected beseitigt werden.

Paginierungsanforderungen

Wie wir im vorherigen Punkt besprochen haben, wird der gesamte Datensatz sofort vom Selektor geladen, was bedeutet, dass keine Notwendigkeit besteht, die Daten in Teile aufzuteilen, sodass das Paging-Konzept nutzlos ist. Die Select2-Funktion hingegen verarbeitet den gesamten Datensatz und lädt teilweise die erforderlichen Ergebnisse und unterstützt das Konzept des Paging. Wenn der Benutzer zum Ende der aktuellen Daten scrollt, ruft er die Suchfunktion auf, um durch Laden weitere Daten bereitzustellen.

Tag-Unterstützungstypen

Die einzige Markup-Unterstützung, die das Options-Tag bietet, ist der gerenderte Text, der von der Auswahl unterstützt wird. Select2 hingegen stellt einen Erweiterungspunkt bereit, der verwendet werden kann, um verschiedene Markups zur Darstellung der Ergebnisse zu erstellen.

Ergebnisse hinzufügen

Um Ergebnisse hinzuzufügen, haben Choosen und select2 zwei Optionen, statisch oder dynamisch, aber Choose kann keine Ergebnisse dynamisch hinzufügen, während select2 genau das Gegenteil tut und das dynamische Hinzufügen von Ergebnissen mithilfe von Tags ermöglicht.

Entwicklung

Sass und CoffeeScript wurden zur Entwicklung von select verwendet, während reines JavaScript und CSS zur Entwicklung von select2 verwendet wurden.

Die oben genannten Unterschiede sind die Hauptunterschiede zwischen Select und Select. Es gibt auch einige kleinere Unterschiede, wie z. B. die Größe von Select beträgt 27 KB, während die Größe von Select 2 mit 57 KB größer ist.

HINWEIS – Es wurde festgestellt, dass Saas und CoffeeScript die Debugging-Entscheidungen erschweren.

Select2 unterstützt offen mobile Geräte, während Chosen sich auf einigen Geräten absichtlich selbst deaktiviert. Wenn Sie daher die „erweiterte Auswahlbox“ auf mobilen Geräten nutzen möchten, empfiehlt sich die Verwendung von Select2.

Fazit

In diesem Artikel haben wir erfahren, dass es zwei JQuery-Plugins gibt, die zum Formatieren von Auswahlfeldern verwendet werden können, nämlich Select2 und Chosen. Sowohl das Select2- als auch das Chosen-Plugin verbessern das Erscheinungsbild ausgewählter Boxen und verbessern das Verhalten der Boxen, wodurch sie benutzerfreundlich werden. Es gibt viele Unterschiede zwischen Select2 und Choose, einschließlich des Datenladevorgangs, ob Paging erforderlich ist, ob Ergebnisse dynamisch hinzugefügt werden können und Entwicklungsmethoden.

Das obige ist der detaillierte Inhalt vonErklären Sie Chosen und Select2 anhand von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!