Inhaltsverzeichnis
Huebee-Farbauswahl
Bootstrap-Farbauswahl
Reaktionsfarbe
MD-Farbauswahl
Color Joe
Iris
Radialer Farbwähler
ColoReact Color Picker ist ein weiteres kleines Farbauswahl-Widget, das gut mit React funktioniert. Es ist einfach zu bedienen und ermöglicht die Erstellung von Farbwählern unterschiedlicher Komplexität. Die Benutzeroberfläche reagiert in all diesen Situationen.
Die ColorPick-Bibliothek ist ein einfaches jQuery-Plugin, das Sie Ihrer Website hinzufügen können, um einen minimalen Farbwähler mit modernem Aussehen zu integrieren. Es hat ein sehr stilvolles Design, das sich nahtlos in fast jede Website einfügt.
iro.js Color Picker ist das funktionsreichste JavaScript-Farbauswahl-Widget auf unserer Liste. Die Tatsache, dass es keine weiteren Abhängigkeiten hat, macht es noch attraktiver. Sie müssen keine Bibliotheken oder Frameworks von Drittanbietern oder CSS- oder Bilddateien laden, damit der Farbwähler funktioniert. Schauen Sie sich diesen Stift von James Daniel an:
Abschließende Gedanken
Heim CMS-Tutorial WordDrücken Sie Top 10 der kostenlosen und Open-Source-JavaScript-Farbwähler

Top 10 der kostenlosen und Open-Source-JavaScript-Farbwähler

Aug 28, 2023 pm 12:21 PM

Farbwähler sind komplexe UI-Elemente, mit denen Benutzer eine Farbe aus einer bestimmten Palette auswählen können. Es gibt zwei Möglichkeiten, einer Webseite einen Farbwähler hinzuzufügen. Die erste besteht darin, einfach input 元素,并将 type 属性设置为 color zu verwenden. Das Hinzufügen ist einfach und Sie können Ereignis-Listener anhängen, um basierend auf der ausgewählten Farbe Änderungen an der Webseite vorzunehmen.

Ein Problem bei der Verwendung des input-Elements zum Erstellen eines Farbwählers besteht darin, dass die Benutzeroberfläche zwischen den Browsern erheblich variieren kann. Dies ist möglicherweise nicht immer zufriedenstellend, je nachdem, was Sie erstellen möchten. Ihre Benutzer erwarten normalerweise nur geringfügige Änderungen in der Benutzeroberfläche, unabhängig davon, welchen Browser sie verwenden. Darüber hinaus passt das visuelle Erscheinungsbild des integrierten Farbwählers möglicherweise nicht richtig zum Gesamtthema Ihrer Website.

Sie können dieses Problem mithilfe eines JavaScript-basierten Farbwählers lösen. In diesem Artikel stelle ich Ihnen einige der besten kostenlosen und quelloffenen JavaScript-Farbwähler vor, die über ihre eigenen einzigartigen Funktionen und eine eigene Benutzeroberfläche verfügen.

Huebee-Farbauswahl

Huebee Color Picker bietet Ihnen eine benutzerfreundliche Oberfläche zum Anzeigen einer begrenzten Auswahl an Farben. Typischerweise werden Sie bei Farbwählern aufgefordert, eine Farbe aus einem Farbverlauf von einem Punkt zum nächsten auszuwählen. Huebee hingegen zeigt einen bestimmten Farbsatz basierend auf den von Ihnen festgelegten Parametern an.

Mit der Initialisierungsoption des Farbwählers können Sie die Anzahl der Farbtöne angeben, die in den Farbwähler aufgenommen werden sollen. Sie können auch den Farbton und die Sättigung sowie den ersten Farbton des Farbrasters auswählen. Es besteht sogar die Möglichkeit, Ihre eigenen benutzerdefinierten Farben im Farbwähler anzuzeigen, indem Sie sie als Array übergeben.

Darüber hinaus verfügt Huebee über einen Ereignis-Listener, der es Ihnen ermöglicht, Maßnahmen zu ergreifen, wenn sich der ausgewählte Farbwert ändert. Über vier verschiedene Eigenschaften können Sie individuell auf den vollen Farbwert bzw. dessen Farbton, Sättigung und Helligkeit zugreifen. Sie können das Attribut isLight auch verwenden, um zu überprüfen, ob der Benutzer eine helle oder dunkle Farbe ausgewählt hat.

Weitere Funktionen des Huebee-Farbwählers sind auf der offiziellen Website dokumentiert.

Bootstrap-Farbauswahl

Wie Sie vielleicht schon erraten haben, ist Bootstrap Colorpicker ein Farbauswahl-Plugin für Bootstrap. Es gibt ihn in zwei verschiedenen Versionen. Die 2.x-Version funktioniert mit Bootstrap 3 und 4, während die 3.x-Version mit Bootstrap 4 funktioniert.

十大免费开源 JavaScript 颜色选择器

Ein Vorteil der 3.x-Version besteht darin, dass sie auch dann noch funktioniert, wenn Sie Bootstrap überhaupt nicht verwenden. Sie können es ohne Verwendung des Bootstrap-Frameworks verwenden, indem Sie während der Initialisierung einfach popover 选项的值设置为 falsenull hinzufügen.

Mit dieser Bibliothek können Sie viele interessante Dinge tun. Sie können beispielsweise eine vordefinierte Farbpalette erstellen, die Benutzern zusammen mit einem Farbwähler angezeigt wird. Sie können auch einen erweiterten Farbwähler erstellen, der dynamische Farbfelder basierend auf Ihrer aktuell ausgewählten Farbe erstellt.

Sie haben viel Kontrolle über die Benutzeroberfläche des Farbwählers. Dies umfasst alles von geringfügigen Änderungen am Erscheinungsbild bis hin zum Hinzufügen völlig neuer Elemente, z. B. Schaltflächen mithilfe Ihrer eigenen HTML-Vorlage. Die Dokumentation auf der Website behandelt dies alles ausführlicher.

Reaktionsfarbe

Websites und Apps verwenden verschiedene Arten von Benutzeroberflächen für die Farbauswahl. Wollten Sie schon immer eines davon auf Ihrer Website ausprobieren? Mit der React Color-Bibliothek können Sie genau das tun.

十大免费开源 JavaScript 颜色选择器

Es enthält 13 verschiedene vorgefertigte Farbwähler, um die Benutzeroberfläche beliebter Websites und Anwendungen wie GitHub, Photoshop, Chrome und Twitter zu simulieren. Darüber hinaus können Sie verschiedene Komponenten verwenden, um Ihren eigenen, einzigartigen Farbwähler zu erstellen.

MD-Farbauswahl

MD Color Picker ist eigentlich ein Angular-basierter Farbwähler und seine Benutzeroberfläche ist von der Material Design-Philosophie inspiriert. Außerdem wird eine kleine Bibliothek namens tinycolor.js verwendet, um Farbwerte zu manipulieren.

十大免费开源 JavaScript 颜色选择器

Der Farbwähler bietet Benutzern viele verschiedene Möglichkeiten, Farben aus Pop-ups auszuwählen. Sie können das gute alte RGB-Spektrum verwenden oder den RGBA-Schieberegler verwenden. Außerdem können sie mithilfe zweier unterschiedlicher Palettenvarianten ihre Wunschfarbe auswählen. Sie können eine optionale Funktion hinzufügen, die die bisherigen Farbauswahlen der Benutzer verfolgt, um ihnen bei der schnellen Auswahl von Farben zu helfen.

Color Joe

Colorjoe ist ein einfacher und erweiterbarer Farbwähler, den Sie problemlos in Ihre Website integrieren können. Der Begriff „skalierbar“ bezieht sich hier auf Ihre Fähigkeit, mithilfe von CSS Abmessungen zu definieren und das Layout so zu steuern, dass es auf allen Bildschirmgrößen gut aussieht.

十大免费开源 JavaScript 颜色选择器

Es enthält zwei verschiedene Ereignis-Listener – changedone –, die Ihnen helfen, basierend auf der Benutzerinteraktion mit dem Farbwähler zu reagieren. Durch die Übergabe einer Reihe von Parametern während der Initialisierung können Sie einen RGB- oder HSL-Selektor erstellen. Die API erleichtert auch das Hinzufügen eigener UI-Elemente zum Farbwähler, um ihn an Ihre Bedürfnisse anzupassen.

Iris

Iris ist ein einfacher Farbwähler, der von Automattic, dem Unternehmen hinter WordPress, entwickelt wurde. Es verwendet jQuery und jQuery UI als Abhängigkeiten und ist daher eine gute Wahl für alle, die diese beiden Bibliotheken bereits verwenden. Nachdem Sie die entsprechende Bibliothek eingebunden haben, können Sie den Farbwähler in Ihre eigene Website integrieren, indem Sie iris() auf dem Eingabeelement aufrufen.

Es gibt viele nützliche Optionen, mit denen Sie das Verhalten des Farbwählers auf Ihrer Website ändern können. Sie können eine Palette gängiger Farben anzeigen oder eine Reihe von Farben zur Anzeige in einer Palette übergeben. Sie haben die volle Kontrolle über die Breite des Farbwählers und darüber, wo er angezeigt wird, wenn er an ein Eingabeelement angehängt wird.

Iris verfügt auch über einige Rückruffunktionen und -methoden. Sie können mehr über diese auf der Iris-Website erfahren. Es enthält einige Live-Arbeitsbeispiele des Farbwählers.

Radialer Farbwähler

Dieser radiale Farbwähler verfolgt einen anderen Ansatz als die UI-Seite der Farbwähler. Es verfügt über einen radialen Schieberegler, der die ausgewählte Farbe in der Mitte anzeigt. Unser Ziel ist es, die Bedienung so einfach und benutzerfreundlich wie möglich zu gestalten.

Schauen Sie sich Rosens Demo unten an, um zu erfahren, wie Sie Farbwähler in Vue.js verwenden:

Unter Berücksichtigung dieser Idee bietet der Schieberegler Unterstützung für Bildschirmleseprogramme und die tastaturbasierte Farbauswahl. Sie können die Pfeiltasten Aufwärts und Abwärts drücken, um den Tonwert zu erhöhen oder zu verringern. Benutzer können die Enter-Taste drücken, um den Farbwähler zu schließen oder zu öffnen, und dann die Tab-Taste drücken, um den Farbwähler in den Fokus zu rücken. Sättigungs- und Helligkeitswerte werden bei der Ersteinrichtung an den Farbwähler übergeben. Weitere Informationen zu den verschiedenen Konfigurationsoptionen für den Farbwähler finden Sie auf der Website von Radial Color Picker.

Ich habe auf die Vue-Version verlinkt, aber dieser Farbwähler funktioniert auch mit React und Angular.

ColoReact

ColoReact Color Picker ist ein weiteres kleines Farbauswahl-Widget, das gut mit React funktioniert. Es ist einfach zu bedienen und ermöglicht die Erstellung von Farbwählern unterschiedlicher Komplexität. Die Benutzeroberfläche reagiert in all diesen Situationen.

十大免费开源 JavaScript 颜色选择器Auf der Beispielseite wird erläutert, wie Sie einen sehr einfachen Farbwähler oder etwas erstellen, das Transparenz und Farbfelder unterstützt. Sie können auch eine benutzerdefinierte Benutzeroberfläche für den Farbwähler erstellen, die perfekt zu Ihrer Website passt.

Farbauswahl

Die ColorPick-Bibliothek ist ein einfaches jQuery-Plugin, das Sie Ihrer Website hinzufügen können, um einen minimalen Farbwähler mit modernem Aussehen zu integrieren. Es hat ein sehr stilvolles Design, das sich nahtlos in fast jede Website einfügt.

十大免费开源 JavaScript 颜色选择器Da es sich um ein jQuery-Plugin handelt, müssen Sie die jQuery-Bibliothek in Ihre Webseite einbinden (falls Sie dies noch nicht getan haben). Zwei nette Funktionen dieses Farbwählers sind der Dunkelmodus und die Möglichkeit, kürzlich ausgewählte Farben automatisch im lokalen Speicher zu speichern.

Der Farbwähler verwendet standardmäßig die Flat UI-Farbdatenbank. Sie können jedoch auch Ihren eigenen Farbsatz bereitstellen und die Beschriftungen der Palette während der Initialisierung ändern.

Sie haben vielleicht bemerkt, dass dieser Farbwähler Benutzern eine relativ kleine Liste von Farben zur Auswahl bietet. Dies wird dadurch ausgeglichen, dass Sie die Möglichkeit haben, ein Eingabeelement und seinen Parameter

einzuschließen, in den der Benutzer den Hexadezimalwert einer beliebigen Farbe eingeben kann.

allowCustomColorIro.js

iro.js Color Picker ist das funktionsreichste JavaScript-Farbauswahl-Widget auf unserer Liste. Die Tatsache, dass es keine weiteren Abhängigkeiten hat, macht es noch attraktiver. Sie müssen keine Bibliotheken oder Frameworks von Drittanbietern oder CSS- oder Bilddateien laden, damit der Farbwähler funktioniert. Schauen Sie sich diesen Stift von James Daniel an:

Das obige ist der detaillierte Inhalt vonTop 10 der kostenlosen und Open-Source-JavaScript-Farbwähler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die 5 besten IDES für die WordPress -Entwicklung (und warum) Die 5 besten IDES für die WordPress -Entwicklung (und warum) Mar 03, 2025 am 10:53 AM

Auswahl der richtigen integrierten Entwicklungsumgebung (ID) für die WordPress -Entwicklung Seit zehn Jahren habe ich zahlreiche integrierte Entwicklungsumgebungen (IDEs) für WordPress -Entwicklung untersucht. Die schiere Abwechslung - von frei bis kommerziell, einfach zu FEA

Erstellen Sie WordPress -Plugins mit OOP -Techniken Erstellen Sie WordPress -Plugins mit OOP -Techniken Mar 06, 2025 am 10:30 AM

Dieses Tutorial zeigt, dass das Erstellen eines WordPress-Plugins mithilfe von OP-Prinzipien (Object-oriented Programming) erstellt wird, wodurch die Dribbble-API eingesetzt wird. Lassen Sie uns den Text für Klarheit und Zuversicht verfeinern und gleichzeitig die ursprüngliche Bedeutung und Struktur erhalten. Objektori

So übergeben Sie PHP -Daten und -ketten an JavaScript in WordPress So übergeben Sie PHP -Daten und -ketten an JavaScript in WordPress Mar 07, 2025 am 09:28 AM

Best Practices für die Übergabe von PHP -Daten an JavaScript: Ein Vergleich von wp_localize_script und wp_add_inline_script Das Speichern von Daten in statischen Zeichenfolgen in Ihren PHP -Dateien ist eine empfohlene Praxis. Wenn diese Daten in Ihrem JavaScript -Code benötigt werden, Incorporat

So einbetten und schützen Sie PDF -Dateien mit einem WordPress -Plugin So einbetten und schützen Sie PDF -Dateien mit einem WordPress -Plugin Mar 09, 2025 am 11:08 AM

Dieser Handbuch zeigt, wie PDF -Dateien in WordPress -Posts und Seiten mit einem WordPress -PDF -Plugin eingebettet und geschützt werden. PDFs bieten ein benutzerfreundliches, allgemein zugängliches Format für verschiedene Inhalte, von Katalogen bis zu Präsentationen. Diese Methode ens

See all articles