Tag: jquery

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.

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 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.

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.

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.

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 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.

PickSlide: Vielseitiger Farbwähler als jQuery-Plugin

Online-Werkzeuge für das Auswählen oder Mischen von Farben gibt es mittlerweile in verschiedenen Ausführungen. Tools wie der Color Blender, ColorJack oder ColorBlendy sind nur einige Vertreter dieser Art. Wer einen umfangreichen und anpassbaren Farbwähler auf jQuery-Basis sucht, kann sich PickSlide ansehen. Dabei handelt es sich um ein Color Picker-Plugin, das viele Optionen zur Anpassung des Farbwählers bietet.

PickSlide basiert im Gegensatz zu vielen anderen Farbwählern nicht auf dem HSV- oder HSB-System, sondern auf dem HSL-Farbsystem (Hue/Saturation/Lightness). Das HSL-System ist gut lesbar und findet Verwendung in gängigen Grafikprogrammen.
Das Plugin bietet neben den HSL-Reglern noch RGB-Regler und Variationen für die HSL-Farbwerte. Durch die Variationen lässt sich sehr einfach ein harmonisches Farbschema erstellen. PickSlide kann bei der Einbindung angepasst werden und so sind alle Regler optional, so dass auch eine minimalistische Darstellung gewählt werden kann.

jQuery: Weitere Sammlung an ausgesuchten Plugins

Mit der ultimativen jQuery-Liste wurde schon 2009 eine umfangreiche und gut sortierte Liste mit den verschiedensten jQuery-Plugins veröffentlicht, die auch heute noch eine gute Quelle darstellt. Eine zweite Ressource stellt das handsortierte Plugin-Repository von Edan Hewitt dar: Auch hierbei handelt es sich um eine sehr übersichtliche Sammlung mit unterschiedlichen jQuery-Plugins.

Auf der Seite befinden sich diverse Erweiterungen für Effekte, Formulare, Navigationen, Text-Effekte, Galerien, Slider, Scrolling oder Lightboxes. Das Schöne an der Seite ist der rechte Bereich, der aus einer iframe besteht und die Plugins direkt in Form von Demos darstellt. Dadurch können die Erweiterungen schnell angesehen und getestet werden.

jQuery: Beta-Version von jQuery 1.8 zeigt Neuerungen

In einem Blog-Eintrag des offiziellen jQuery-Blogs wurde kürzlich die erste Beta-Version von jQuery 1.8 samt Neuerungen vorgestellt. So wird das JavaScript-Framework mit dieser Version modular — einzelne Komponenten der Bibliothek (Ajax, CSS, Dimensions, Effects, Offset) können also wie auch bei MooTools separat heruntergeladen und in ein Projekt integriert werden. Die Module können mit dem Grunt-Tool kompiliert werden. Mehr dazu in der Readme.md bei GitHub.

Weiterhin werden die Hersteller-Präfixe (-webkit, -moz) bei CSS-Attributen automatisch gesetzt, je nachdem, welcher Browser beim Benutzer verwendet wird. Ebenfalls interessant ist die Neuerung, dass Animationen künftig je nach Browser mit DOM-Animationen oder CSS3-Transitions ausgeführt werden. Gerade auf mobilen Geräten funktionieren CSS3-Transitions wesentlich besser als DOM-Animationen. Schließlich wurde die Selektor-Engine Sizzle verbessert und ein XSS-Schutz wird mit Version 1.9 implementiert werden. Weitere Details finden sich im jQuery-Blog.

jQuery Walidate: Unkomplizierte Formular-Validierung

Die Validierung von HTML-Formularen mit JavaScript kann oft etwas umständlich und komplex werden, da viele Fälle abgedeckt werden müssen und Formular-Elemente mit entsprechenden Attributen versehen werden müssen. Dank CSS3 und HTML5 wurden die Möglichkeiten der Formular-Validierung schon wesentlich verbessert, aber die eigentliche Überprüfung muss dennoch per JavaScript erfolgen, sofern eine clientseitige Validierung gewünscht ist.
Wer ohnehin jQuery einsetzt und Formulare validieren möchte, kann sich in diesem Zusammenhang das Plugin jQuery Walidate von Michael Fischer ansehen. Der Grundgedanke hinter dem Plugin besteht darin, ein bestehendes HTML-Formular nicht weiter anpassen zu müssen, so dass eine einfache Integration der Validierung möglich wird.

Das Plugin kann sowohl global als auch spezifisch auf einzelne Formular-Elemente angewendet werden. Der globale Aufruf könnte aussehen wie folgt:

• $('#form').walidate({
• submitSelector: 'input[type="submit"]',
• validateClass: 'validate',
• requiredClass: 'required',
• validClass: 'valid',
• errorClass: 'error',
• doIfAllIsValid: function() {
• // Form sent
• },
• doIfSomethingIsInvalid: function() {
• // Error
• }
• }, function() {
• // Callback
• });

Die Optionen und Funktionen dürften durch ihre Benennung selbsterklärend sein. Beim Aufruf für spezifische Formular-Elemente können reguläre Ausdrücke, dazugehörige Event-Handler und die Funktionen "valid" sowie "invalid" eingesetzt werden, um auf die Eingabe des Benutzers zu reagieren. Das Plugin sieht vielversprechend aus und eine Demo findert sich bei jsFiddle.