jKit – all inclusive jQuery Toolkit – das bessere jQuery UI


Vor ca. 1,5 Monat stieß ich auf jKit, einem jQuery UI Toolkit, was laut seinem Autor Fredi Bach 99% aller Feature enthält die man für die eigene Website benötigt. Deshalb möchte ich im Folgenden auf dieses Toolkit eingehen und ein paar Anwendungsbeispiele erklären. Die Möglichkeiten sind unheimlich groß, von A wie Animation bis Z wie Zoom ist alles enthalten. Das Toolkit deckt alles ab was das Webdesigner Herz begehrt. Neben den Standard jQuery Modulen wie Tabs, Accordion, Slideshow oder Lightbox, enthält es auch Kommandos für Filter, Pagination, Sortierung, Formular Validierung und Tooltips. Dazu kommen noch eine ganze Reihe weiterer Module, aber ich denke mit vorangegangenen habe ich schon die wichtigsten und häufigst verwendeten genannt.

Download

Als Download werden 3 jKit Varianten angeboten, eine komplett Version, die quasi alle Anwendungen in sich vereint. Daneben gibt es eine Autoload Version, welche sich die benötigten Komponenten automatisch lädt, wenn sie benötigt werden und es gibt die Möglichkeit sich einen Custom Download mit den Wunschkomponenten zusammenzustellen. Ich verwende die Vollversion, da sie meiner Meinung nach mit 64kb als minified Datei alltagstauglich ist. Wers kleiner mag, kommt auf ca. 17kb mit einer gzipped Datei. Die Autoload Variante klingt auch sehr verlockend und ist mit 12kb als minified Datei sogar noch kleiner.

Einbinden und Initialisieren

Und das wars auch schon mit Einbinden, denn die erste Besonderheit ist, dass die jkit Module inline initialisiert, dazu wird sich innerhalb eines html tags, des data-jkit Attributs bedient, welches das entsprechende Modul angibt und auch direkt alle Optionen des Moduls in sich aufnimmt. Zu jedem Modul gibt es eine Standard Konfiguration so dass es meist nur nötig ist das Modul selbst anzugeben: Zum Beispiel: data-jkit = [ lightbox ] 

Bevor ich mit den Beispielen beginne, ein Hinweis auf einen weiteren großen Unterschied zu anderen jQuery Toolkits und/oder Plugins. jKit reduziert sich auf die Funktion und kommt quasi ungestylt. Viele Module von jKit benötigen kein CSS, dort wo ein CSS Schnipsel notwendig ist, findet man ein Beispiel in der Dokumentation des entsprechenden Moduls. Das CSS Schnipsel ist dabei auf das Nötigste beschränkt, so dass man es im weiteren Verlauf voll und ganz an die eigenen Bedürfnisse anpassen kann. Für mich als Webdesigner ist das ein Riesenvorteil, da der Zeitaufwand der CSS Anpassung bei der Verwendung verschiedener Plugins, welche alle ihren eigenen Style haben deutlich größer ist. In der Download Version ist bereits eine CSS Datei vorhanden, ich verwende in meinen Projekten aber eine eigene „jkit.css“, die letztendlich nur die jKit CSS Schnipsel enthält, welche ich tatsächlich benötige .

Demo – jKit Beispiele (Auszug)

jKit – Ausreizen durch Kombinieren

Durch die Kombination der jKit Module reizt man die Möglichkeiten des Toolkits erst richtig aus.  Die Verwendung ist dabei genauso einfach, man reiht einfach die Module innerhalb des HTML Tags aneinander. Beispiel: data-jkit = [ lightbox ] [ tooltip ] Folgendes Beispiel zeigt die Kombination von jKit Modulen zu einer Datatable.

Demo – jKit Datatable

Fazit

Für mich gehört jKit zu den absoluten Aufsteigern auf dem Markt der jQuery Toolkits. Die Verwendung ist sehr einfach, auch wenn die inline Initialisierung nicht jedermanns Sache sein dürfte. Die Möglichkeit Module miteinander zu kombinieren, lässt viel Raum für Experimente und Spielereien. Fredi Bach hat in meinen Augen nicht zuviel versprochen, wenn er sagt, dass jKit 99% aller jQuery Feature abdeckt, die man als Webdesigner benötigt. Bleibt zu hoffen, dass Fredi Bach die Möglichkeit findet, das Projekt weiter zu forcieren und das sich um jKit herum eine starke Community bildet. Ich werde die Entwicklung auf jeden Fall weiter verfolgen und auch im Produktiveinsatz werde ich regelmäßig auf jKit zurückgreifen.

jKit Website

14.04.2013 Autor: Rico Loschke Kategorie: Demos & Tutorials 3



Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.