Artikel abonnierenFarbauswahl-Dialog mit ColorPicker
ColorPicker ist eine jQuery-Klasse, mit der ein Farbauswahl-Dialog erstellt werden kann, der dem Benutzer die Eingabe/Auswahl von Farben erleichtert. Der Dialog ist ähnlich aufgebaut wie der vieler Bildbearbeitungsprogramme, und hat einen ähnlichen Funktionsumfang. Die Klasse steht unter der MIT- und der GPL-Lizenz.
Colorpicker in Aktion (Demo)
Webseite vom Colorpicker-Skript
Fortschrittsbalken mit CSS/JavaScript
Fortschrittsbalken werden vor allem bei Webanwendungen gebraucht, die mit dem Benutzer interagieren, beispielsweise beim Hochladen von Dateien oder um den Fortschritt in einem Formular anzuzeigen. Aber auch bei anderen Webanwendungen können Fortschrittsbalken sinnvoll sein, beispielsweise um den aktuellen Stand eines noch nicht fertiggestellten Projektes anzuzeigen oder den noch verfügbaren Speicherplatz, o.Ä.
In dieser Anleitung erkläre ich wie man einfache Fortschrittsbalken mit CSS erstellen kann, und stelle 4 JavaScript-Skripte vor mit denen sich “bewegliche” Fortschrittsbalken erstellen lassen.
Mehrere Dateien flexibel hochladen
Mit einem Dateieingabe-Element kann immer nur eine Datei ausgewählt und hochgeladen werden. Will man dem Benutzer die Möglichkeit geben mehrere Dateien auf einmal hochzuladen, kann man einfach mehrere Dateieingabe-Elemente erstellen. Das hat allerdings einen Nachteil: In den meisten Fällen sind entweder zu viele, oder zu wenige Dateielemente da. Mit etwas JavaScript kann man dieses Problem lösen: Der Benutzer entscheidet selbst, wie viele Dateien er hochladen möchte.
Eine Lösung wäre, dass man eine Schaltfläche erstellt, mittels derer der Benutzer weitere Eingabefelder hinzufügen kann. Neben den zusätzlichen Eingabefeldern erstellt man dann einfach noch jeweils eine Schaltfläche zum Entfernen des Eingabefeldes, falls der Benutzer es sich anders überlegt.
Eine andere Möglichkeit wäre, das der Benutzer nur ein Eingabefeld, und eine Liste von ausgewählten Dateien hat. Nachdem eine Datei ausgewählt wurde, wird kommt die Datei in die Liste, und das Eingabefeld ist wieder leer, für die nächste Datei. Eigentlich wird das Eingabefeld dabei durch ein neues ersetzt, und das alte unsichtbar gemacht. Für den Benutzer sieht es aber so aus, als würde er die ganze Zeit dasselbe Eingabeelement benutzen.
