Tag: jquery

jQuery: Native JavaScript-Äquivalente zu Funktionen

Frameworks wie jQuery oder MooTools zeichnen sich vor allem durch ihre einfache und intuitive Schreibweise aus. Hinter den Framework-Funktionen stecken meist komplexere Mechanismen, da Elemente mit speziellen Eigenschaften ausgestattet werden. Manche Funktionalitäten lassen sich aber mittlerweile auch sehr leicht nativ umsetzen, wodurch die Performance erhöht werden kann. Dieser Aspekt ist gerade bei mobilen Geräten sehr wichtig, da hier die Qualität einer WebApp durch übermäßige jQuery-Operationen schnell sinken kann.
Lee Brimelow von Adobe hat in einem Beitrag ein paar jQuery-Funktionen aufgezeigt, die in aktuellen Browsern mit nativen JavaScript-Funktionen ersetzt werden können.

In der Aufzählung finden sich so die Äquivalente für Selektoren, DOM-Manipulationen und CSS-Änderungen, wie zum Beispiel:

• jQuery:
• $(document.body).append("<div id='myDiv'><img src='im.gif' /></div>");
•  
• JavaScript:
• var frag = document.createDocumentFragment();
•  
• var myDiv = document.createElement("div");
• myDiv.id = "myDiv";
•  
• var im = document.createElement("img");
• im.src = "im.gif";
•  
• myDiv.appendChild(im);
• frag.appendChild(myDiv);
• document.body.appendChild(frag);

Sicherleicht ist die jQuery-Syntax kompakter, aber die native Schreibweise lässt sich einfach in einer Funktion verpacken und wenn es um Performance geht, sollten die integrierten Fähigkeiten des Browsers auf jeden Fall ausgenutzt werden. Wer wissen möchte, welcher Browser neuere Selektoren wie "querySelectorAll" unterstützt, kann dies auf CanIUse.com nachschlagen.
Lee Brimelow hat übrigens auch Benchmarks aufgestellt, in denen der Unterschied von jQuery zu nativen Funktionen deutlich wird.

Flat UI: Modernes PSD- und HTML-Interface-Kit

Im Rahmen einer Marketing-Aktion wurde kürzlich eine kostenlose Variante des "Flat UI"-Interface-Kits von Designmodo veröffentlicht. Der entsprechende Blog-Eintrag zeigt das User Interface und enthält Links zu den PSD-Dateien und der HTML-Version. Auf der Demo-Website können die Bedienelemente ausprobiert werden. Die HTML-Version basiert auf Twitters Bootstrap-Framework und macht zudem Gebrauch von Sass.

Das User Interface-Kit enthält verschiedene Farbschemata sowie Bedienelemte aller Art (Buttons, Progress Bars, Checkboxes, Slider, Tags, Navigationen und Icons). Die Quelldateien der HTML-Version stehen bei GitHub zum Download bereit. Darin enthalten sind neben den Sass-Modulen auch diverse jQuery-Plugins, HTML5-Shivs und die angefertigten Symbol-Schriftarten.

ThreeSixty: jQuery-Plugin für 360°-Ansichten

Fotografische Abbildungen von Objekten auf einer Website sind in der Regel zweidimensional und wenig interaktiv. Soll das Objekt von mehreren Perspektiven aus betrachtet werden können, bieten sich inzwischen verschiedene Methoden an: Neben dem Erstellen und Einbinden eines 3D-Modells per WebGL oder Flash kann in manchen Fällen auch die klassische Methode ausreichend sein. Hierbei werden die unterschiedlichen Ansichten des Objekts als Grafiken hinterlegt und dann je nach Mausinteraktionen angezeigt. Diese Pseudo-3D-Methode bewährt sich immer noch, da fotorealistische Abbildungen möglich sind und eine Rundum-Ansicht auf Basis der hinterlegten Bilder oft ausreichend ist.
Das jQuery-Plugin ThreeSixty kann in diesem Fall für die Interaktivität sorgen.

Das Plugin benötigt lediglich ein data-Attribut mit dem Dateipfad und einen Aufruf, in dem die Mausrichtung angegeben wird:

• HTML:
• <div class="threesixty" data-path="assets/img/src/gem{index}.JPG" data-count="61"></div>
•  
• jQuery:
• $('.threesixty').threeSixty({
• dragDirection: 'horizontal'
• });

Anschließend lässt sich das Pseudo-3D-Objekt virtuell rotieren. Das Beispiel auf der Website dürfte die Funktionalität verdeutlichen.

Motio: jQuery-Plugin für CSS-Sprite-Animationen

Die manuelle Animation von CSS-Sprites gestaltet sich in einem reinen Text-Editor nicht immer einfach, gerade wenn es um das Einlesen und Auswerten von Sprite-Daten geht. Ein einfaches, aber dennoch wertvolles jQuery-Plugin in diesem Zusammenhang stellt Motio dar: Damit können über verschiedene Parameter CSS-Animationen gesteuert werden.

Die Optionen des Plugins definieren also den Ablauf einer Sprite-Animation:

• $('#element').motio({
• speed: -50,
• bgSize: 1024,
• paused: 1
• });

Auf der Websites des Plugins finden sich interessante Anwendungsbeispiele, welche den Einsatz des Plugins und CSS-Sprite-Animationen demonstrieren. Zudem können die Animationen in Echtzeit per Schieberegeler angepasst werden.

Kendo UI: Update der DataViz-Komponente und mehr

Das Kendo UI-Framework stellt schon seit geraumer Zeit eine multifunktionale Lösung dar, wenn es um die Umsetzung moderner User Interface-Widgets geht, die im Web und auf mobilen Geräten einsetzbar sein sollen. Die Bibliothek basiert auf jQuery und bietet auch eine eigene Komponente für die Visualisierung von Graphen und Diagrammen, genannt DataViz. DataViz unterstützt mittlerweile eine Vielzahl von Darstellungen und auch einen Stock-Chart, der mit einem Timeslider ausgestattet ist.

Interessant ist im Hinblick auf die Graphen der ThemeBuilder, mit dem sich die Darstellung der verschiedenen Diagramm-Elemente ganz einfach anpassen lässt.

Neben JavaScript/jQuery unterstützt Kendo UI nun auch Server-Anwendungen, die mit ASP.NET entwickelt werden. Ein Java-Wrapper befindet sich in der Beta-Phase.
Unabhängig von der eigentlichen Bibliothek ist die kürzlich durchgeführte Umfrage über HTML5 interessant, bei der mehr als 4000 Entwickler teilgenommen haben und die aktuelle Situation des Webstandards beurteilen.

jQuery: Box2D für Physik-Effekte bei DOM-Elementen

Es ist soweit: Die 2D-Physik-Engine Box2D steht ab sofort auch in Form eines jQuery-Plugins zur Verfügung. Neben der AS3-Version und der JavaScript-Variante gibt es also mit "Box2D-jQuery" einen weiteren Vertreter der beliebten Engine, mit der sich physikalisch korrekte Animationen erzeugen lassen. Im Gegensatz zur JavaScript-Version "Box2DJS", die auf Canvas basiert, macht das jQuery-Plugin Gebrauch von CSS3-Transformationen und erlaubt dadurch Physik-Effekte bei DOM-Objekten.

Die Performance des Plugins ist überraschend gut und die Verwendung ist denkbar einfach:

• $("h1, div, img").box2d({ 'y-velocity': 5 });

Die Eigenschaft "y-velocity" ist im Beispiel auf den Wert 5 eingestellt, was bedeutet, dass die DOM-Elemente 5 Pixel pro Schritt nach unten bewegt werden (Gravitation). Neben der vertikalen Beschleunigung lassen sich wie gehabt noch weitere Attribute wie Dichte, Reibung oder Federkraft einstellen. Bei GitHub findet sich die Bibliothek mit Dokumentation und Beispielen.

Crumble: Interaktive Feature-Tour für Websites

Komplexere Websites oder Webanwendungen sind nicht immer auf den ersten Blick verständlich oder sind so ausgelegt, dass der Benutzer zu Beginn eine kurze Einführung erhält. Eine solche Einführung kann auf verschiedene Wege umgesetzt werden. Wer eine Lösung in Form von Sprechblasen sucht, die an den entsprechenden Stellen auf der Seite eingeblendet werden, kann einen Blick auf das jQuery-Plugin Crumble werfen.

Mit dem Skript können beliebig viele Texte angezeigt werden, die dem Benutzer Hinweise zur Benutzung geben. Mit einem Klick auf die angezeigte Sprechblase wird die nächste Information eingeblendet und die Seite wird eventuell zur Position gescrollt. Die Texte werden als geordnete Liste (<ol>) angelegt, in der verschiedene data-Attribute gesetzt werden können, die beispielsweise den Winkel oder den Abstand der Sprachblase zum Text definieren. Eine Dokumentation findet sich auf GitHub. Der einzige Nachteil besteht darin, dass für die Sprechblasen Grafiken und kein CSS3-Code verwendet wird.

jQuery dForm: Formulare mittels JSON erzeugen

Für die dynamische Erzeugung von HTML-Fomularen gibt es bereits diverse Lösungen wie beispielsweise pForm oder jQuery Contactable. Grundsätzlich kann eine Skriptsprache wie PHP oder Ruby sehr effektiv sein, wenn es darum geht, die Bausteine eines Kontaktformulars dynamisch zu erzeugen. Allerdings ist bei Webanwendungen, die primär auf JavaScript basieren, eine entsprechende JavaScript- oder jQuery-Lösung erforderlich. Das jQuery-Plugin dForm könnte hier interessant werden, da sich damit Formulare aus JSON-Daten erzeugen lassen.

Die Erzeugung könnte dann in etwa so aussehen:

• $("#formular").dform({
• "action": "index.php",
• "method": "get",
• "html":
• [
• {
• "name": "username",
• "id": "txt-username",
• "caption": "Benutzername",
• "type": "text"
• },
• {
• "type": "submit",
• "value": "Anmelden"
• }
• ]
  });

Das Plugin erlaubt zudem die Integration jQuery UI-Widgets und lässt sich auch durch Form-Validierung und Mehrsprachigkeit erweitern.