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
Fortschrittsanzeige beim Hochladen von Dateien
Das Hochladen von Dateien kann unter Umständen sehr lange, manchmal sogar Stunden dauern. Normalerweise gibt der Browser dem Benutzer aber keine Rückmeldung darüber, wie viele Daten schon hochgeladen wurden, bzw. wie lange der Vorgang noch dauern wird. Mit APC lassen sich während des Hochladevorgangs Informationen über selbigen ermitteln, und diese können benutzt werden um eine Fortschrittsanzeige für den Benutzer zu erstellen. Der Fortschritt könnte beispielsweise als Prozentwert, als Balken, oder als absoluter Wert (123/567 MiB) angezeigt werden. Eine Fortschrittsanzeige beim Hochladen steigert die Benutzerfreundlichkeit der Seite.
Wie man diese Funktionalität von APC benutzt, was vorausgesetzt wird, und welches Informationen APC liefern kann erkläre ich in diesem Artikel.
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.
Formulare: Datei-Element umgestalten
Das Formularelement zum Auswählen einer Datei lässt sich nicht mittels CSS umgestalten, der Browser verwendet für dieses Element immer das Standardaussehen, so wie es vom Betriebssystem vorgegeben ist. Bei der Gestaltung von Formularen ist das natürlich ärgerlich, da das Element meistens nicht zum Aussehen der anderen Formularelemente passt.
Shaun Inman beschreibt in seinem Artikel Styling File Inputs with CSS and the DOM eine Methode diesem Element mittels Java Script und CSS trotzdem ein anderes Aussehen zu verpassen. Wie seine Methode funktioniert, und wie man sie noch verbessern/erweitern kann, erkläre ich in diesem Artikel.
