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!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von Tanja am 08.04.2013 (09:34Uhr)

    Die t3n Artikel werden leider immer schlechter!

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

    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:09Uhr)

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

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

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

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

    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
Von Raptoren und Naughty Cats: Die 6 verrücktesten JavaScript-Snippets
Von Raptoren und Naughty Cats: Die 6 verrücktesten JavaScript-Snippets

Auch Entwickler können Witze machen! Das Schöne dabei: Selbst wenn die Ergebnisse keinen unmittelbaren Nutzen für das aktuelle Projekt entfalten, kann man sich an schön geschriebenen Zeilen … » 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

Clockpicker: Wenn Android und Bootstrap Kinder hätten
Clockpicker: Wenn Android und Bootstrap Kinder hätten

Android hat uns mit einem erfrischend neuen Timepicker-Konzept überrascht, aber dieses Konzept funktioniert nicht nur auf mobilen Geräten, sondern auch im Web – jedenfalls wenn ihr euch … » weiterlesen

Kennst Du schon unser t3n Magazin?

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