Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 24. September 2013

Flat, Mobile, Responsive: Frische JavaScripte und jQuery-Plugins des Monats September 2013

Mit jQuery-Plugins und JavaScript-Tools ist es wie mit WordPress-Themes, Fonts, Icons und anderen Ressourcen für die Designer- und Developer-Community. Es gibt sie in schier rauhen Mengen. Dabei ist es gerade bei JavaScript- und jQuery-Lösungen wichtig, den Überblick zu behalten. Denn, wenn man schon ein externes Werkzeug einsetzt, dann sollte es wenigstens nicht von Anno Tuck, sondern halbwegs frisch und zeitgemäß sein. Einige aktuelle Vertreter dieser Spezies hat Dr. Web für Sie zusammen gestellt.

Das mobile Webdesign ist eines der ganz großen Themen in der Developer-Gemeinde. Das schlägt sich auch in der Entwicklung von JavaScripten und jQuery-Plugins nieder. Neben Tools für die Einblendung von mobil-typischen Fortschrittsbalken und die mobil-orientierte Ansprache bestimmter Geräte, finden Sie auch einen Clone des Editors aus dem Dienst Medium, den die Twitter-Erfinder gegründet haben. Ebenso werden die Fans responsiven Designs bedient. Alle Tools sind ganz aktuell oder, wie im falle von Mozillas TogetherJS ganz aktuell aktualisiert worden ;-)

TogetherJS: JavaScript-Bibliothek von Mozilla umbenannt

togetherjs

TogetherJS kennen regelmäßige Dr. Web-Leser(innen) bereits. Schon im April stellten wir den Dienst ausführlich vor. Damals hörte er noch auf den Namen TowTruck, zu deutsch: Abschleppwagen und war ersonnen worden, um Developern kollaborativ bei der Arbeit zu helfen. So erklärte sich auch der Zusatz "Who you call, when you get stuck", zu deutsch: Den du rufst, wenn du stecken bleibst.

Mittlerweile sieht Mozilla den Anwendungszweck breiter gefasst und schlägt sogar vor, die JavaScript-Bibliothek, die nach wie vor ohne weitere Abhängigkeiten auskommt, zur Verwaltung der Einkaufsliste für die nächste gemeinsame Party zu verwenden. Näheres dazu im folgenden Video:

TogetherJS steht unter MPL-Lizenz (Mozilla Public Licence) kostenfrei zur Verwendung bereit.

TogetherJS: Produkt-Website | Github-Repository

PACE zeigt einen Fortschrittsbalken beim Laden einer Seite

pace

PACE bietet einen vollautomatischen Ladebalken für jede Website mit dynamischen Inhalten und funktioniert ohne weitere Abhängigkeiten. Das Tool wird mit verschiedenen Themes geliefert und erfordert keinerlei Konfiguration im Übrigen. PACE läuft in der Tat vollautomatisiert.

Die Einbindung des JavaScript, nebst des gewünschten Themes an frühestmöglicher Stelle ist völlig ausreichend. Das Tool kann kostenfrei zu jedem legalen Zweck eingesetzt werden, solange die Lizenzinformationen nicht entfernt werden.

PACE: Demo | Github-Repository

FlowType.JS ändert Schriftgröße und Zeilenhöhe responsiv

flowtypejs

FlowType.JS sorgt für die Änderung der Schriftgröße und des Zeilenabstandes eines Texts in Abhängigkeit von der Breite des umgebenden Elementes. Auf diese WEise soll die maximale Lesbarkeit der Texte auf allen Geräten und Auflösungen gewährleistet werden. Die Demo-Site gibt einen guten Eindruck davon, dass das auch recht gut funktioniert.

Via CSS gibt man die Start-Optionen vor, als Parameter am Function-Call, der auf das gewünschte Element erfolgt, sind Änderungen möglich. FlowType.JS steht unter MIT-Lizenz kostenfrei zur Verwendung bereit.

FlowType.JS: Demo | Github-Repository

One Page Scroll: Website für Freunde des iPhone 5S

onepagescroll

Wer sich eine Website wie diejenige zum iPhone 5S wünscht, der wird sich über One Page Scroll freuen. Dieses JavaScript von Pete R., wie sich der thailändische Gründer von BucketListly selbst nennt, setzt das bildschirmfüllende Scrollen perfekt um.

Im Beispiel ist der Onepager dreigeteilt, diesbezüglich bestehen jedoch keine Limitationen. Die Zahl der gewünschten Scroll-Abschnitte wird beispielsweise per Section-Tag festgelegt, andere Tags gehen auch. Es ist nur darauf zu achten, dass man etwa abweichende Section-Container dem JavaScript benennt, da es sonst nicht funktionieren kann. Natürlich funktioniert das Scrollen auch per Swipe auf Mobilgeräten. Leider gibt Pete R. keine Lizenz an.

One Page Scroll: Demo | Github-Repository

Formbuilder.js: Grafisches Interface für die clientseitige Formularerstellung

formbuilderjs

Formbuilder.js ist noch nicht im Endausbauzustand angekommen. Der Formular-Builder ist zur Zeit lediglich in der Lage, die clientseitige Formulargestaltung zu übernehmen. Die komplette serverseitige Verarbeitung muss eigenständig programmiert werden. In einer der kommenden Versionen soll die Server-Funktionalität allerdings noch ergänzt werden.

Schon jetzt ist es komfortabel möglich, sich Formulare mit der Maus zusammen zu klicken. Das kann doch Google Forms auch, werden Sie vielleicht jetzt denken. Das stimmt, jedoch kann Formbuilder.js in die eigene Applikation nahtlos integriert werden. Das Tool steht unter MIT-Lizemz zur kostenfreien Verwendung bereit.

Formbuilder.js: Demo | Github-Repository

Device.js: JavaScript und CSS auf mobile Geräte zuschneiden

devicejs

Device.js ist ein Hilfsmittel für die zielgerichtete Ansprache des Besucherbrowsers mit CSS und JavaScript. Device.js erkennt verschiedene Geräte-Charakteristika. Erkannt wird etwa, ob es sich um einen Phone-, Tablet- oder Desktop-Besucher handelt, ob das Gerät hochkant oder quer gehalten wird und welches Betriebssystem darauf läuft.

Hat Device.js die Erkennung abgeschlossen, fügt es dem HTML-Element die entsprechenden CSS-Klassen hinzu, die der Entwickler wiederum gezielt ansprechen kann. Die Idee ist interessant, allerdings wegen des Konzepts der Browser-Detection nicht absolut zuverlässig. Das Tool kann kostenfrei zu jedem legalen Zweck eingesetzt werden, solange die Lizenzinformationen nicht entfernt werden.

Device.js: Demo | Github-Repository

Vex: Unabhängige JavaScript-Bibliothek liefert schicke Dialog-Overlays

vex

Vex erlaubt die Erstellung schicker, sehr moderner Dialog-Overlays. Dazu liefert es einige Themes mit, jedoch können auch völlig individuelle Overlays erschaffen werden. Die komplette Ansteuerung läuft pro Dialog, so dass prinzipiell kein Overlay dem anderen gleichen muss. Das Tool wiegt unter 7kb, benötigt keine weiteren Komponenten und steht unter MIT-Lizenz zur kostenfreien Verwendung bereit.

Vex: Demo | Github-Repository

Ion.Tabs für jQuery bringt konfigurierbare Tabs mit Skin-Support

iontabs

Das jQuery-Plugin Ion.Tabs erlaubt die einfache Erstellung einer Tab-Navigation nebst Inhalts-Tabs über eine einfache HTML-Struktur, die mit HTML5 Data-Attributen angereichert wird. Die Data-Attribute werden dann vom Plugin verarbeitet und umgesetzt. Die Optik der Tabs wird über Skins gesteuert, von denen zwei mitgeliefert werden. Das eine liefert ein klassisches Tab-Design mit begrenzenden Linien, das zweite orientiert sich am Flat Trend. Da die Skins CSS-Dateien sind, ist Ihrer Fantasie natürlich keine Grenze gesetzt. Auch Ion.Tabs kommt aus Russland und steht unter MIT-Lizenz zur kostenfreien Verwendung bereit.

Ion.Tabs: Produktseite | Github-Repository

MediumEditor klont den WYSIWYG-Editor von Medium.com

medium-editor

Medium Editor steht unter der außergewöhnlichen Beer-Ware-Lizenz, die besagt, dass Sie das Tool völlig kostenfrei verwenden dürfen. Sollten Sie dem Entwickler jedoch einmal begegnen, müssen Sie ihm ein Bier ausgeben. Da selbiger Davi Ferreira heißt und in Rio de Janeiro lebt, dürfte die Gefahr für die meisten von uns überschaubar bleiben ;-)

Inhaltlich ist MediumEditor ein Clone des Editors des Dienstes Medium.com. Formatierungen werden innerhalb des Editors per Rechtsklick initiiert. Eine Toolbar erscheint direkt am markierten Element und stellt sinnvolle Formatierungsoptionen bereit.

Der Aufruf von MediumEditor ist simpel. Nach dem Einbau des zugehörigen CSS und der Einbindung des eigentlichen Scriptes wird eine Instanz desselben aufgerufen. Dieser gibt man die zu überwachende Klasse mit, die standardmäßig .editable heißt. Künftig wird nun jedes Element, das mit der Klasse .editable ausgestattet ist, mit einem MediumEditor versehen.

MediumEditor: Github-Repository

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Ein Kommentar

  1. Super Artikel! Danke!

Schreibe einen Kommentar

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