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.
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.
Geteilte Eingabe
Seriennummern und ähnliche Codes werden oft auf mehrere Teile aufgeteilt, um es dem Benutzer zu erleichtern sie abzulesen. Bei der Eingabe ist es oft ähnlich, die Seriennummer kann in mehreren Teilen eingegeben werden, sinnvollerweise in den gleichen Teilen wie sie dem Benutzer übergeben wurde.
Wenn der Benutzer das erste Feld ausgefüllt hat, wäre es praktisch, wenn der Browser automatisch zum zweiten Feld weiterspringen würde. Sowas lässt sich mit Java Script leicht realisieren. Noch besser wäre es natürlich, wenn der Benutzer auch mit den Pfeiltasten zwischen den Feldern navigieren könnte, oder wenn nur bestimmte Zeichen vom Benutzer eingegeben werden können.
In diesem Artikel erkläre ich, wie man mittels Java Script ein solches automatisches Weiterspringen zwischen Formularfeldern programmiert. Außerdem stelle ich eine kleine Klasse vor die es zusätzlich dazu noch ermöglicht mit den Pfeiltasten durch die Felder zu navigieren und die Eingabe auf bestimmte Zeichen zu begrenzen.
Ein einfacher Buchstaben- und Wörterzähler
Ein Wörter- bzw. Buchstabenzähler kann für den Benutzer von großem Nutzen sein. Wenn ihm (z.B. aus technischen Gründen) nur eine bestimmte Anzahl von Zeichen zur Verfügung stehen, sieht er bereits bei der Eingabe, wie viele Zeichen er noch schreiben kann. Beim Verfassen längerer Texte ist ein Wörterzähler hilfreich, denn so kann der Benutzer ungefähr abschätzen wie lang sein Text bereits ist.
- Beim Schreiben von Kurznachrichten (SMS) ist die maximale Anzahl von Zeichen begrenzt. Bei privaten Nachrichten in Foren, oder Kontaktformularen gibt es oft ähnliche Begrenzungen. Hier ist eine Anzeige der noch verfügbaren Zeichen sinnvoll.
- Eine Anzeige der Wortzahl ist beispielsweise für einen Redakteur oder Blogger nützlich, denn so sieht er ob er seinen Text vielleicht etwas kürzen, oder noch etwas mehr schreiben sollte.
In diesem Artikel stelle ich einen einfachen Buchstabenzähler bzw. Wörterzähler in Form einer Java Script-Klasse vor, und erkläre seine Funktionsweise. Weiterlesen»
