JavaScript & jQuery

Kleine Helfer: 5 jQuery-Plugins für den Entwickler-Alltag

29. März 2013
von

Die Entwicklergemeinde rund um jQuery ist sehr aktiv. Nahezu stündlich werden Plugins ersonnen, die es so bislang nicht oder nicht in der Form gab. Der Fortschritt ist kaum noch zu protokollieren. Dabei sind große Projekte, darunter sind aber auch viele kleine Helfer für ganz bestimmte Anwendungszwecke. Fünf dieser kleinen Tools stellen wir im folgenden Beitrag vor.

Imageloader.js – Schnelles Vorausladen von Bildern

imageloader

Imageloader.js erledigt eine gängige Aufgabe schnörkellos. Dem jQuery-Plugin wird ein Array von Bild-URLs übergeben. Dieses lädt es vor. Eine Callback-Funktion bei Fertigstellung des Preloads erlaubt, weitere Programmlogik daran zu knüpfen. Gleiches existiert für den Fall eines Fehlers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
        $.imageloader({
            urls: ['images/0.jpg', 'images/1.jpg', 'images/2.jpg', 'images/3.jpg'],
            onComplete: function(images){
                // when load is complete
            },
            onUpdate: function(ratio, image){
                // ratio: the current ratio that has been loaded
                // image: the URL to the image that was just loaded
            },
            onError: function(err){
                // err: error message if images couldn't be loaded
            }
        });
    });

Imageloader.js steht unter MIT-Lizenz zur kostenfreien Nutzung bereit.

Jtwt.js – Anzeigen von Tweets auf Websites via JSON

jtwtjs

Jtwt.js erlaubt es, unter Zugriff auf Twitters JSON API, die aktuellen Tweets eines bestimmten Users im Design anpassbar auf beliebigen Websites anzeigen zu lassen. Das Standarddesign aus der mitgelieferten CSS-Datei kann leicht geändert oder ergänzt werden. Der Aufruf ist übersichtlich:

1
2
3
4
5
6
7
<script type="text/javascript">
    $(window).load(function() {
        $(' #twitter ').jtwt({
            username : 'yourusername'
        });
    });
</script>

Die Definition des Anzeige-Widgets erfolgt über die Hinzufügung der Klasse twitter:

1
<div id="twitter"></div>

Jtwt.js steht zur kommerziellen und privaten Nutzung kostenlos bereit, sofern der Urheber genannt wird (CC BY 3.0).

jQuery.notific8 – Benachrichtigungs-Popups inspiriert durch Windows 8

notific8

Will Steinmetz gefällt das Benachrichtigungsdesign unter Windows 8. Und so entschloss er sich, die im Flat Design gehaltenen Notifications als jQuery-Plugin nachzubauen, was ihm ausgesprochen gut gelungen ist. Auf seiner Demoseite zum Projekt können Sie die verügbaren Options und Templates interaktiv zusammen stellen, um so einen Eindruck von der Leistungfähigkeit zu erhalten. Herunterladen müssen sie das Plugin dann via Github. Notific8 setzt auf Design-Templates, die leicht erstellt werden können. So ist flexible Optik auch innerhalb der gleichen Website einfach möglich. Ein Aufruf mit allen Optionen sieht so aus, ist also erneut sehr übersichtlich:

1
2
3
4
5
6
7
8
9
$.notific8('My notification with all options.', {
  life: 5000,
  heading: 'Notification Heading',
  theme: 'amethyst',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500
});

Notific8 steht unter BSD-Lizenz zur kostenlosen Nutzung bereit.

jui_dropdown – Dropdown-Menüs per Button mit vielen fertigen Designs

jui_dropdown von Christos Pontikis setzt neben jQuery auch jQuery UI voraus und ist konsequenterweise zu jQuery UI Themes kompatibel. jui_dropdown liefert einen mehr oder weniger aufwändig gestaltbaren Button, dem auf Klick ein Dropdown-Menü entspringt. Das Klicken auf eine Menü-Option liefert eine ID zurück, die dann der weiteren Verwendung zugänglich ist. jui_dropdown steht unter MIT-Lizenz zur kostenfreien Nutzung bereit.

jui_dropdown

jQuery-menu-aim – Navigieren in stark verschachtelten Dropdown-Menüs

Dropdown-Menüs haben ein system-immanentes Problem: wenn man mit der Maus aus einem Menü-Overlay hinausgerät, klappt das Menü zu. Gerade bei stark verschachtelten Dropdown-Szenarien gerät die Nutzererfahrung schnell zur Frustration. Vielfach versucht man dem Problem Herr zu werden, indem man den Overlays Schließ-Verzögerungen beigibt. jquery-menu-aim geht einen anderen Weg. Anstelle mit Timeouts und Delays zu arbeiten, versucht das Plugin die Mausbewegung des Nutzers zu erkennen. Zielt dieser in Richtung eines Sub-Menüs wird dieses offen gehalten, bewegt er sie indes in Richtung eines anderen Hauptmenüpunktes, wird dieser verzögerungsfrei geöffnet.

jquery-menu-aim

Ben Kamens entwickelte das Plugin für die Khan Academy, die das Konzept inzwischen auch einsetzt. Die Idee kam ihm beim Surfen auf Amazon.com. jQuery-menu-aim steht unter MIT-Lizenz zur kostenfreien Nutzung bereit.

Links zum Beitrag

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , , , , , ,

2 Kommentare zu „Kleine Helfer: 5 jQuery-Plugins für den Entwickler-Alltag
  1. […] Kleine Helfer: 5 jQuery-Plugins für den Entwickler-Alltag […]

  2. […] The article was first published in the German Dr. Web Magazin […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!