Drücke die Tasten ◄ ► für weitere Artikel  

jQuery: 13 Plugins für euer nächstes Webprojekt

Webentwicklung ohne JavaScript, im Besonderen jQuery, ist heute fast nicht mehr vorstellbar. Deswegen zeigen wir euch 13 jQuery-Plugins, die ihr vielleicht noch nicht kennt, aber unbedingt kennenlernen solltet. Viel Spaß damit!

jQuery: 13 Plugins für euer nächstes Webprojekt

Bei der von Webprojekten kann man fast nicht mehr auf jQuery verzichten. Gerade im Bereich des User-Interface-Designs und der User-Experience, also dem Anwendererlebnis, kommt man ohne kaum über die Runden. Gerade das Responsive Webdesign stellt hier eine besondere Herausforderung dar. Die Verkleinerung des Viewports zum Beispiel bei Smartphones erhöht die Anforderungen an das nutzerorientierte Design, es muss zwischen wichtigen und weniger wichtigen Informationen unterschieden werden. Wenn wir responsive entwickeln, legen wir den Fokus auf bestimmte Elemente, sonst würden wir ja die gesamte Website skaliert im Viewport anzeigen lassen. Folglich sind die Entscheidungen das Responsive Design betreffend eng mit der Informationsarchitektur verknüpft. Die folgende Liste zeigt euch einige jQuery-Plugins, die euch in Zukunft dabei helfen können.

Minimalistisch und effizient: ResponsiveSlides.js

Das winzige jQuery-Plugin erstellt euch einen minimalistischen Slider, der sich jeder Auflösung optimal anpasst. Wenn ihr einen Bild-Slider haben wollt, der automatisch die Bilder animiert und dabei responsive ist, wird Responsiveslides.js euer Favorit sein.

Bessere Usability mit Ladda

Ein Hingucker! Ladda ermöglicht euch einen animierten Spinner in einem Button beziehungsweise in einem Link anzeigen zu lassen. Ladda gibt es übrigens auch für Bootstrap.

jQuery Ladda Animation

Naver: Schönes Navigationsmenü im Responsive Webdesign

Naver lässt euch eure Navigationsmenüs auf kleinen Auflösungen darstellen. Dabei wird das „Menu-Overlay“-Pattern umgesetzt, das es euch erlaubt, ein Menü-Icon am oberen Rand des Gerätes darstellen zu lassen, das sich bei Interaktion wie ein Dropdown-Menü verhält.

jQuery Naver

Der Name ist Programm: Responsive Carousel.js

Dieses jQuery-Carousel bietet euch eine Vielzahl von verschiedenen Darstellungsoptionen und ist natürlich responsive.

Responsive-Measure mit jQuery

Die Darstellung von Fließtext kann im Responsive Webdesign eine Hürde darstellen. Mit Plugins wie Fittext könnt ihr dieses Problem beseitigen. Responsive-Measure bezieht in diesen Kontext noch die ideale Zeichenanzahl pro Zeile mit ein. Auf jeden Fall einen Blick wert!

Probleme mit der Höhe im responsive Webdesign?

Das jQuery-Plugin responsiveheight errechnet euch pro Element die Höhe relativ zur Breite.

Textfelder mit jQuery Autosize

Das Plugin jQuery Autosize lässt Textfelder stilvoll, zusammen mit dem eingegebenen Text, wachsen.

Layout-Bibliothek: Freewall

Mit Freewall könnt ihr verschiedenste Grid-Layouts umsetzen. Natürlich ist Gridwall vollkommen responsive.

Multiple Desktops mit FerroSlider

Dieser Slider erinnert an die von Linux und Mac bekannten multiplen Desktops. Das jQuery-Plugin ist derzeit in Version 2.2 und wird weiterentwickelt. Ihr könnt einen ähnlichen Effekt auch mit reveal.js umsetzen, allerdings wird dabei im Gegensatz zu FerroSlider der gesamte Viewport für die Animation genutzt.

Succinct.js

Dieses jQuery-Plugin ermöglicht es euch, Fließtexte automatisch zu verkürzen. Dadurch wird ein einfaches Verkürzen von Texten auf kleinen Viewports ermöglicht. Readmore erlaubt euch sogar ein automatisches Hinzufügen des Textes „Mehr lesen“ pro gekürztem Text.

JVFloat

Mit JVFloat könnt ihr Labels von Input-Feldern bei einem Touch-Event über dem Input-Feld schweben lassen. So kann auch während des Tippens erkannt werden, welches Formularfeld gerade ausgefüllt wird. Eine Demo gibt es hier.

JVFloat
JVFloat, ein jQuery-Plugin für Input-Felder. (Screenshot: JVFloat)

Loadie.js

Kennt ihr den neuen Ladebalken von YouTube? Mit dem Loadie.js könnt ihr einen ähnlichen Effekt erzeugen. Ein sehr dezenter Ladebalken am oberen Ende der Website gibt euren Besuchern auf eine nicht aufdringliche Art und Weise über den Systemfortschritt Bescheid.

Sidr

Facebook hat in der mobilen Variante ein ziemlich gutes Menü entwickelt, das sich außerhalb der Website befindet. Nach Interaktion kommt es zum Vorschein, indem die eigentliche Website auf der anderen Seite aus dem sichtbaren Bereich geschoben wird. Dieses Menü könnt ihr jetzt ähnlich mit Sidr umsetzen.

Wenn ihr mehr über Responsive Webdesign im Detail erfahren wollt, dann seht eucht die „Responsive-Webdesign“-Serie hier auf t3n.de an.

231 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
11 Antworten
  1. von jQuery: 14 Plugins für flexible Website… am 01.04.2012 (16:26Uhr)

    [...] jQuery: 14 Plugins für flexible Website-Layouts » t3n News [...]

  2. von [KW13/12] Themen der Woche » IT::f… am 02.04.2012 (08:31Uhr)

    [...] Ein paar jQuery-Plugins für flexible Web-Layouts [...]

  3. von Linkhub – Woche 13-2012 am 03.04.2012 (16:54Uhr)

    [...] jQuery: 14 Plugins für flexible Website-Layouts » t3n News [...]

  4. von Sven am 09.11.2013 (17:00Uhr)

    Eine super Sammlung, Speziell Naver werde ich mir mal genauer anschauen. Bin schon lange auf der Such nach einer neuen Navigation für meinen Blog. Schöne Auflistung, danke dafür.

    Gruß Sven

  5. von RollingWebdesign am 10.11.2013 (09:37Uhr)

    Schöne Liste. Ich würde Owl Carousel hinzufügen.

  6. von Jens am 10.11.2013 (09:47Uhr)

    Sehr schöne Sammlund, danke dafür!
    Solche Sammlungen decken immer wieder Perlen pfiffiger Entwickler auf, das finde ich wichtig. Wenn man selber sucht, finde man sicher euin past Dinge, aber alkes brstimmt nicht.

    Gruß,
    Jens

  7. von Papa Bodehase am 10.11.2013 (13:47Uhr)

    Da sind schöne Plugins dabei.
    Gut gemacht!

  8. von Finn Hillebrandt am 10.11.2013 (16:35Uhr)

    Tolle Sammlung! Einige Plugins kann ich gut gebrauchen ;)

  9. von Natives JavaScript statt jQuery – So… am 01.02.2014 (14:06Uhr)

    […] Nicht zuletzt ist die Cross-Browser-Kompatibilität ein wichtiger Faktor, warum ein Framework wie jQuery trotz JavaScript zum Einsatz kommen […]

  10. von Worüber man noch bloggen hätte können… am 08.03.2014 (09:24Uhr)

    […] Responsive Design ist eins der, aus meiner Sicht, derzeit meist gehypten Begriffe in der Webentwickler-Szene. Es bietet viele Vorteile – macht aber auch verdamt viel Arbeit. Diese Arbeit wird von manch einem bereits bestehenden JavaScript gerne übernommen. t3n hat 14 Plugins für jQuery vorgestellt. http://t3n.de/news/jquery-14-plugins-flexible-378150/ […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code

Du bist Anfänger und setzt keine oder kaum Coding-Conventions ein? Dann solltest du diesen Artikel lesen, denn darin lest ihr wie ihr die Qualität eures JavaScript-Codes verbessern könnt: mit... » weiterlesen

Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker
Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker

Die JavaScript-Bibliothek jQuery erleichtert uns zweifellos das Leben als Entwickler. Der enorme Funktionsumfang und die vergleichsweise hohe Dateigröße stehen bei manchen Projekten aber nicht im... » weiterlesen

SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen