Vorheriger Artikel Nächster Artikel

10 nützliche JavaScript-Funktionen und jQuery-Plugins

Fast täglich werden neue JavaScript-Bibliotheken und -Plugins veröffentlicht. Einige nützliche Helfer und Effekte haben wir in diesem Artikel zusammengetragen.

10 nützliche JavaScript-Funktionen und jQuery-Plugins

Unslider

Unslider ist ein Foto-Slider, der mit angenehmen Übergängen und Cross-Browser-Support überzeugen kann. Der Slider ist responsive und passt sich auch auf mobilen Geräten perfekt an. Auf dem Desktop kann er mit den Pfeiltasten gesteuert werden.

Mehr dazu erfahrt ihr auf der Projektseite von Unslider.

jPanelMenu

jPanelMenu ist ein jQuery-Plugin für die Erstellung von Seiten-Navigationen. Bootstrap bietet eine ähnliche Funktion für responsive Layouts. Dabei klickt man auf einen Button, das Menü fährt von oben nach unten aus und schiebt den Content nach unten. Bei jPanelMenu fährt das Menü von der Seite herein. Einen ähnlichen Ansatz speziell für die mobile Navigation bietet euch Sidetap.

Auf der Seite von jPanelMenu könnt ihr das in Aktion sehen und selbst ausprobieren.

Effekte für Dropdown Listen

Mit dem Simple-Effects-for-Drop-Down-Lists-Plugin von Codrops könnt ihr normalen Select-Elementen einen neuen Anstrich verpassen. Das Plugin verbessert die Optik des Elements und versieht es mit verschiedenen Aufklappeffekten und Anordnungen.

Auf der Projektseite des Plugins erfahrt ihr, wie ihr es für eure Projekte nutzen könnt.

jQuery Scrollpath

Mit jQuery Scrollpath kann der Benutzer anhand eines Pfades durch die Webseite geleitet werden. Wird die Scroll-Funktion des Browsers benutzt, folgt der Viewport dem vordefinierten Pfad. So ergeben sich viele Möglichkeiten für die Gestaltung interessanter, interaktiver Websites.

Auf der Projektseite von jQuery Scrollpath erlebt ihr das Skript live in Aktion.

Countable.js

Countable.js ist eine JavaScript-Funktion, die live Absätze, Wörter und Zeichen in Eingabefeldern zählt. Dabei benötigt Countable keine externe Bibliotheken. Auf der Projektseite von Countable.js könnt ihr die Funktionen des Skripts live testen. Auf GitHub gibt es Countable zum direkten Download.

Questionmark.js

questionmark.js

Mit Questionmark.js kannst du Nutzer deiner Webseite oder Web-App Hilfestellung bei der Benutzung von Shortcuts geben. Erfasst das Skript die Eingabe eines Fragezeichens via Tastatur, öffnet sich ein modales Fenster in dem Shortcuts zusammengefasst werden können.

Das Skript läuft auf allen modernen Browser einschließlich des Internet Explorers ab Version 9. Mit einem zusätzlichen Skript lässt sich auch Kompatibilität mit dem Internet Explorer 8 herstellen.

ifvisible.js

if-visible.js-demo

Ifvisible.js ist ein nettes Skript, das eingesetzt werden kann, um zu überprüfen, ob ein Benutzer gerade deine Webseite betrachtet oder nicht. Das Skript reagiert darauf, ob gerade Benutzerinteraktion mit der Seite stattfindet und ob die Seite im Vordergrund ist. Mit einem Timer kann nach einer bestimmten Inaktivitätszeit eine Aktion ausgelöst werden. Auch das „Wakeup“ Event kann mit einer zusätzlichen Funktion belegt werden, sodass Ifvisible.js gut für die Realisierung von Lock- und Idle-Screens in Web-Apps benutzt werden kann.

Offline.js

offline.js-javascript

Ein weiteres Skript für das Handling von User-States ist Offline.js. Die schlanke Bibliothek überprüft, ob der Benutzer mit dem Internet verbunden ist und benachrichtigt die Benutzer, wenn die Verbindung gerade unterbrochen sein sollte. Besondern bei mobilen Anwendungen kann Offline.js ein nützlicher Wegbegleiter sein. Ein besonders nützliches Feature von Offline.js ist auch die Möglichkeit, Ajax-Requests nach Verlust der Verbindung zurückzuhalten und nach Wiederherstellung wieder an den Server zu senden. Offline.js wurde mit Browsern wie Chrome, Firefox, Safari und Internet Explorer 8+ getestet.

Pace.js

pace-progress-bar-javascript

Füge pace.js zu deinem Projekt hinzu, ergänze es um ein CSS-Theme deiner Wahl und du erhältst eine schicke Ladestandsanzeige. Derzeit stehen elf verschiedene und anpassbare Designs zum Download zur Verfügung.

Pongstar

pngstar

Pongstar ist ein jQuery-Plugin, das für die Darstellung aktueller Instagram-Medien benutzt werden kann. Die Bibliothek benötigt Bootstrap und und kann mit Hilfe deiner User-ID und eines Instagram-Access-Tokens deine Instagram-Beiträge direkt auf deine Seite holen. Dabei unterscheidet Pongstar.js zwischen den zuletzt gepusteten, gelikten und entsprechend getaggten Bildern.

Und welche JavaScript-Funktionen und jQuery-Plugins sind eure Favoriten? Wir freuen uns auf Ergänzungen und Tipps in den Kommentaren!

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von Tanja am 08.04.2013 (09:34 Uhr)

    Die t3n Artikel werden leider immer schlechter!

    Antworten Teilen
  2. von celle886 am 07.11.2013 (10:52 Uhr)

    Der Titel verspricht irgendwie etwas anderes. Ansonsten ganz interessant, wenn man nach spannenden Plugins oder einem netten Feature für seine Webseite sucht.

    Antworten Teilen
  3. von Micha am 07.11.2013 (14:09 Uhr)

    Kann @Tanja nur zustimmen.
    Linkliste mit teils recht alten Scriptlinks.

    Antworten Teilen
  4. von Niclas am 07.11.2013 (14:16 Uhr)

    Lieber mal auf http://www.unheap.com/ vorbei schauen!

    Antworten Teilen
  5. von pguso am 08.01.2014 (15:32 Uhr)

    Ergänzend möchte ich mein jQuery Plugin vorschlagen http://ladensia.com/circliful/demos.html - man kann damit Statistiken oder frotschritte in Kreisform darstellen.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema JavaScript
Hat $.animate() ausgedient? So nutzt du den Performance-Boost von velocity.js
Hat $.animate() ausgedient? So nutzt du den Performance-Boost von velocity.js

Performance von Bibliotheken ist alles. Sie beeinflusst nicht nur direkt das Anwendererlebnis, sondern auch, wie der Entwickler mit der Bibliothek arbeiten kann. jQuery ist wohl die beliebteste … » weiterlesen

FocusPoint: jQuery-Plugin für fokales Cropping
FocusPoint: jQuery-Plugin für fokales Cropping

Der Einsatz von Bildern im Responsive Webdesign bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das … » weiterlesen

Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt

ContentBuilderJS ist ein jQuery-Plugin, mit dem sich Webseiten aus vorgefertigten Blöcken einfach zusammenklicken lassen. Die Inhalte der jeweiligen Blöcke lassen sich anschließend direkt Inline … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen