Tag: jquery

201309Jan

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.

Motio - jQuery plugin for simple but powerful sprite based animations and panning

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.

201213Dez

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.

Kendo UI DataViz - HTML5 data visualizations for sleek business apps

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

Kendo UI - ThemeBuilder for Kendo UI DataViz

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.

201212Dez

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.

Box2D-jQuery

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.

201218Nov

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.

Crumble - jQuery Feature Tours

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.

201201Okt

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.

jQuery dForm

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.

201217Sep

Gridster.js: jQuery-Plugin für dynamische Raster

Moderne Webanwendungen sind sehr häufig mit einer gewissen Individualität verbunden, die sich zum Beispiel durch ein Anpassen des Layouts auszeichnet. So können Elemente interaktiv verschoben oder umsortiert werden. Für solche Aufgaben eignet sich beispielsweise jQuery UI. Wer nur ein Plugin für das Umstrukturieren von Layout-Elementen benötigt, sollte sich Gridster ansehen. Das jQuery-Plugin bietet eine Drag 'n' Drop-Funktionalität, mit der sich Block-Elemente verschieben, löschen und hinzufügen lassen. Das Layout wird in Echtzeit aktualisiert und neu sortiert.

Gridster.js - jQuery-Plugin für dynamische Raster

Gridster ist einfach zu integrieren und bietet diverse Optionen. Das Plugin arbeitet mit dem data-Attribut von HTML5, über das sich die Blockgrößen und Positionen im Raster definieren lassen. Ein Beispiel:

  • HTML:
  • <div class="gridster">
  • <ul>
  • <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
  • <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
  •  
  • <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
  • <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
  • </ul>
    </div>
  •  
  • JavaScript:
  • $(".gridster ul").gridster({
  • widget_margins: [10, 10],
  • widget_base_dimensions: [140, 140]
  • });

Das jQuery-Plugin erlaubt es zudem, ein serialisiertes Array mit den Positionen der Elemente zu erzeugen. Bei GitHub finden sich weitere Infos und schließlich der Download.

201214Aug

jQuery PowerTip: Flexibles Tooltip-Plugin

Wer nicht unbedingt ein eigenes Tooltip-Plugin in jQuery entwickeln möchte, greift zu fertigen Lösungen wie qTip2. Eine kompakte und alternative Tooltip-Lösung stellt auch PowerTip dar, das ebenfalls als jQuery-Plugin zur Verfügung steht. Das Plugin lässt sich anpassen und so kann per Option die Richtung des Pfeils bestimmt werden, der den Ursprung des Tooltips anzeigt. Der Pfeil an sich wird per border-Deklaration in Verbindung mit der ":before"-Pseudoklasse erzeugt, so dass er in allen Browsern funktioniert.

jQuery PowerTip

Weiterhin kann angegeben werden, ob der Tooltip der Maus folgt und ob seine Position angepasst wird, wenn sich der Mauszeiger an den Fensterrand bewegt und der Platz zum Darstellen des Textes nicht mehr ausreichen sollte. PowerTip ermöglicht zudem das Setzen von optionalen Werten, die bei mehreren Elementen verwendet werden können.

201231Jul

Redactor: Schlanker WYSIWYG-Editor auf jQuery-Basis

Mit TinyMCE oder dem CKEditor stehen schon seit geraumer Zeit komfortable JavaScript-WYSIWYG-Editoren zur Verfügung, die vor allem in Webanwendungen Einsatz finden. Sie lassen sich relativ einfach einbinden und bieten ähnliche Optionen wie ein Textverarbeitungsprogramm.
Eine weitere Alternative in diesem Bereich wäre ein jQuery-Plugin, das den Namen "Redactor" trägt. Dieser Editor ist etwas schlanker, wartet aber mit einer modernen Benutzeroberfläche auf.

Redactor WYSIWYG editor on jQuery

Redactor funktioniert auch auf mobilen Endgeräten und kann somit auch im Tablet-Bereich eingesetzt werden. Es gibt verschiedene Anzeige-Modi, einen Vollbild-Modus, Quellcode-Ansicht, automatische Textfeld-Vergrößerung sowie Tastaturbefehle und eine Auto-Save-Funktionalität. Der Editor ist aktuell in 25 Sprachen verfügbar und kann für nichtkommerzielle Zwecke eingesetzt werden. Weitere Lizenzen können auf der Download-Seite eingesehen werden.