Tag: jquery

jQuery: Klicks außerhalb eines Elements feststellen

Bei der Entwicklung von Benutzeroberflächen und Interaktionen sind in manchen Fällen die gegebenen Möglichkeiten unzureichend. Daher haben einige Entwickler schon virtuelle DOM-Events konzipiert, mit denen erweiterte Abfragen möglich sind — so lässt sich beispielsweise feststellen, wie lange der Mauszeiger über einer Fläche verweilt oder wie lange die Maustaste vom Anwender betätigt wurde. Eine weitere Funktionalität in Form eines jQuery-Plugins bietet Ben Alman mit seinem "clickoutside"-Event an: Damit können Programmierer auf Ereignisse reagieren, die auftreten, sobald der Benutzer einen Punkt außerhalb eines entsprechenden Elements angeklickt hat.

Dies könnte zum Beispiel bei einer Lightbox der Fall sein. Das Verwenden einer großen Overlay-Fläche würde dadurch entfallen. Testen lässt sich das jQuery-Event auf der Demoseite.
Ein Bonbon gibt es vom Plugin-Autor für interessierte JavaScript-Entwickler: Der Quelltext ist kommentiert und kann bei GitHub eingesehen werden.

YUI Library: Alles rund um die Yahoo!-Frameworks

Die verschiedenen JavaScript-Bibliotheken eignen sich für verschiedene Projekte. Manche Frameworks unterscheiden sich nur wenig, andere variieren stark im Funktionsumfang. Die Yahoo! User Interface Library (YUI) gibt es derzeit in den Versionen 2 und 3. Neben den Seiten beim Yahoo! Developer Network (YDN) gibt es noch eine offizielle Website für die JavaScript-Frameworks. Hier findet sich eine große Community, die das Projekt durch Forenbeiträge und eigene Skripte bereichert.

Besonders interessant für YUI-Entwickler ist die Galerie, in der sich fertige Plugins finden. Dabei ist für jeden Geschmack etwas dabei: Angefangen bei Accordions über Date Picker bis hin zu kompletten WYSIWYG-Editoren. Die Benutzerskripte sind mit Beispiel-Codes und Dokumentationen versehen. Zudem finden sich auf den Plugin-Seiten direkt Diskussionen aus dem Forum.
Die YUI-Community ist sehr vorbildlich und auch andere Framework-Websites haben interessante Bereiche: Bei jQuery besteht beispielsweise mit den jQuery Meetups die Möglichkeit, mit anderen Entwicklern Kenntnisse auszutauschen.

AD Gallery: Moderne jQuery-Galerie mit vielen Extras

Skripte für Bildergalerien, Slideshows oder Lightboxes gibt es mittlerweile mehr als genug. Einige Plugins wurden wieder eingestellt, andere wurden verbessert. Und manche Entwickler haben sich etwas Neues überlegt. Dazu zählt auch Anders Ekdahl, der mit seinem jQuery-Plugin "AD Gallery" eine sehr moderne Galerie für Websites entwickelt hat. Dabei liegt der Fokus auf der Präsentation von mehreren Bildern, bei denen eine Übersicht gewährleistet sein soll. Dies hat der Entwickler durch die Darstellung eines Filmstreifens erreicht, in dem alle Bilder ausgewählt werden können.

Beeindruckend sind die verschiedenen Animationen, mit denen die Bilder bei einem Wechsel angezeigt werden. Dabei stehen sowohl gewöhnliche Überblendungen als auch alternative Effekte ("Shrink", "Wild") zur Verfügung. Per Knopfdruck kann eine automatische Slideshow gestartet werden. In der einfachen Variante wird das Skript so angewendet:

• $("element").adGallery();

Man sollte sich die Dokumentation auf der Website und auch das Beispiel ansehen, das heruntergeladen werden kann. Obwohl das jQuery-Plugin sehr komplex ist, kommt es in der komprimierten Variante mit einer Dateigröße von etwa 10 KB aus.

jQuery: Version 1.4.2 des Frameworks veröffentlicht

Wie dem jQuery-Blog zu entnehmen ist, wurde nun Version 1.4.2 des beliebten JavaScript-Frameworks zum Download bereitgestellt. Die aktuelle Version wurde in ihrer Geschwindigkeit verbessert und um Funktionen erweitert: Mit "delegate()" und "undelegate()" lassen sich Ereignisse auf Elemente anwenden, die einen gemeinsamem Ursprung haben. Somit können noch gezielter Interaktionen gesteuert werden.

In dem Blog-Eintrag findet sich zudem ein Diagramm, in dem die aktuelle Geschwindigkeit der Bibliothek zu sehen ist. Sie wurde wieder mit dem TaskSpeed-Benchmark ermittelt und zeigt noch einmal eine erhebliche Verbesserung im Vergleich zu Version 1.4.1. Weiterhin wurden verschiedene Funktionen optimiert — die Details können ebenfalls im Blog nachgelesen werden.
Die aktuelle Version kann auf der jQuery-Website heruntergeladen werden.

SimpleSlider: Einfacher Schiebe-Effekt mit jQuery

Nicht immer sind aufwendige und effektlastige Animationen bei Webprojekten gefragt — einfache Effekte können dezent die gewünschten Informationen übertragen oder bestimmte Aspekte besser beleuchten. Wer auf der Suche nach einem einfachen Slider (Verschiebung) ist, kann sich das jQuery-Plugin von Justin Jones ansehen: Der SimpleSlider wurde von dem Entwickler für ein eigenes Projekt erstellt und erfüllt seinen Zweck. Listenelemente (li) aus einer Liste (ul) werden einfach von rechts nach links animiert. Zudem kann die Animation manuell durch Schaltflächen gesteuert werden.

Das Skript kann in 3 Demonstrationen getestet werden: Als Basis-Version, mit CSS-Eigenschaften oder erweiterten Einstellungen. Das Plugin wird in der einfachen Variante wie folgt eingebettet:

• $("element").simpleslider();

Bei dem aufgerufenen Element handelt es sich wie oben erwähnt um eine Liste, deren Kind-Elemente animiert werden. In den Optionen des jQuery-Plugins können diverse Anpassungen (Geschwindigkeit, Schaltflächen, etc.) vorgenommen werden. Die Buttons können per CSS umgestaltet werden.

jQuery: Zeichenfunktion für einfache Grafiken

In manchen Situationen kann es erforderlich sein, kleine Grafiken oder Abbildungen mit JavaScript zu zeichnen. Speziell für das Zeichnen von Graphen oder Diagrammen können Flash- oder JavaScript-Lösungen hilfreich sein. Mehr Kreativität ermöglicht die jQuery Drawing Library von OpenStudio Communication. Die jQuery-Bibliothek zeichnet durch die Angabe von Koordinaten und Winkeln einfache Grafiken im Browser.

Zum Einsatz kommt die Canvas-Technik oder SVG, sofern vom Browser unterstützt — das Canvas-Plugin "Explorercanvas" für Internet Explorer ist enthalten.
Eine Ellipse kann so beispielsweise mit folgender Zeile erstellt werden:

• $("element").drawEllipse(2, 2, 8, 6, {color: "#123456", stroke: 2});

Eine Beschreibung für die Implementierung der Bibliothek findet sich auf der Website des Skriptes. Zu den Zeichenfunktionen gehören Methoden zum Erstellen von Kreisen, Linien, Bögen oder Polygonen. Der Wermutstropfen stellt die Größe des jQuery-Plugins dar — unkomprimiert schlägt die jQuery Drawing Library etwa 100 KB zu Buche. Die SVG-Bibliothek nimmt dabei einen Teil davon ein.
Wer jQuery-Skripte für die Erstellung von reinen Graphen sucht, sollte bei Steve Reynolds vorbeischauen — in diesem Artikel und in diesem Beitrag stellt er viele Lösungen für dynamische Diagramme vor.

Ketchup: Moderne Formular-Validierung mit jQuery

Zur Überprüfung von Benutzereingaben in HTML-Formularen eignet sich JavaScript bestens. Für jQuery gibt es diverse Plugins, mit denen Formulare in Echtzeit verifiziert werden können. Ein aktuelles Skript dieser Art stellt Ketchup dar — mit dieser jQuery-Erweiterung werden bei fehlenden Eingaben über den entsprechenden Feldern (input) Hinweise eingeblendet, die den Benutzer auf das Pflichtfeld aufmerksam machen.

Das Skript erwartet spezielle Klassen (class) und wird im JavaScript-Code auf das Formular-Element (form) angewendet:

• HTML:
• <form id="element" action="index.php" method="post">
• <input type="text" class="validate(required, username)" />
• </form>
•  
• jQuery:
• $("#element").ketchup();

Neben einfachen Pflichtfeldern können damit auch weitere Funktionalitäten realisiert werden. So kann etwa überprüft werden, ob es sich bei der Benutzereingabe um eine valide Datumsangabe oder E-Mail-Adresse handelt. Das Aussehen der Hinweise lässt sich per CSS anpassen und konfigurieren. Die Nachrichten sind in einer separaten Datei ("jquery.ketchup.messages.js") gespeichert. Beim Download des Skriptes sind bereits diverse Beispiele und Möglichkeiten enthalten.
Interessant bei der Klassen-Schreibweise im HTML-Teil ist übrigens die W3C-Validierung.

TextboxList: jQuery-Plugin für dynamische Tags

Um Benutzereingaben in Echtzeit zu filtern und grafisch anzupassen, bieten sich verschiedene Techniken mit JavaScript an. Eine Möglichkeit besteht darin, Texte von Eingabefeldern in dynamische Schaltflächen umzuwandeln. Dieses Szenario kann beispielsweise dann eintreten, wenn Schlagwörter (Tags) von Benutzern eingegeben werden können — mit dem jQuery-Plugin TextboxList wird die Umwandlung in entsprechende Schaltflächen während der Eingabe vorgenommen. Die Tags können dabei etwa mit Kommata voneinander getrennt werden.

Auf der Demo-Seite des Skripts kann man sich von der Funktionalität überzeugen. Zudem ist eine Auto-Suggest-Funktion mit dem Plugin möglich, so dass die Eingabe weiter vereinfacht werden kann. Ohne erweiterte Einstellungen wird das Plugin mit folgendem Code auf ein Textfeld (input) angewendet:

• $("element").textboxlist();

Das Skript bietet etliche Optionen und Einstellungsmöglichkeiten, die auf der Website eingesehen werden können.
Für nichtkommerzielle Zwecke ist das Plugin frei erhältlich. Möchte man die Funktionalität gewerblich einsetzen, kann für 20 USD eine kommerzielle Lizenz (pro Domain) erworben werden.

JavaScript-Frameworks: Ein ausführlicher Vergleich

Vor einiger Zeit hatte ich mit der JavaScript Framework Matrix eine Übersicht der beliebtesten JavaScript-Bibliotheken und deren Funktionen veröffentlicht. Wer sich darüber hinaus noch tiefer mit der Materie der verschiedenen Frameworks beschäftigen will, kann sich das kürzlich von IBM veröffentlichte Dokument ansehen. Der ausführliche Artikel beschreibt diverse Funktionalitäten von vielen Frameworks wie jQuery, MooTools, Prototype oder Ext JS.

Neben Grundfunktionen wie Selektoren, DOM-Manipulation oder Ajax werden weiter unten im Beitrag auch Plug-Ins für die Frameworks (UX Enhancements) vorgestellt, mit denen sich erweiterte Benutzeroberflächen realisieren lassen. Zudem gibt es noch eine kleine Matrix ("Framework Comparison"), in der die unterschiedlichen Funktionalitäten aufgelistet sind und so leichter verglichen werden können.
Der komplette Artikel kann auch als PDF heruntergeladen werden. IBM stellt viele umfangreiche Artikel zu JavaScript und weiteren Sprachen zur Verfügung, die zum größten Teil interessante Informationen liefern.

jQuery: Gravitation in Animationen erzeugen

Durch physikalische Bewegungsabläufe lassen sich Realismus und Dynamik in Animationen erzeugen. Dabei spielt Gravitation eine wichtige Rolle, die jedoch in Verbindung mit Easing (Abbremsen bzw. Beschleunigen) relativ einfach simuliert werden kann. Im ThemeForest-Blog gab es dazu einen interessanten Artikel, der an einem einfachen Beispiel Gravitationseffekte zeigt.

Unter Verwendung des jQuery Easing Plugins lassen sich solche Effekt sehr gut umsetzen. Die relevanten jQuery-Zeilen entsprechen in etwa:

• yPos = $(block).position()["top"] – $("#air").position()["top"];
• hoehe = ($("#air").outerHeight() – yPos) – $(block).outerHeight();

Das DOM-Element "air" ist das Elternelement (in dem Beispiel die hellblaue Fläche), während "block" den aktuell animierten Block beschreibt. Anschließend wir der CSS-Wert "marginTop" des "block"-Elements mit dem Easing-Parameter "easeOutBounce" animiert. Diese mathematische Berechnung sorgt für den springenden Bewegungsablauf, was dem schwarzen Objekt Gewicht und Material verleiht.