Im Web – und nicht nur da – hat ein Framework Karriere gemacht und sich mittlerweile zu Jedermanns Liebling entwickelt – jQuery. Die Statistiken gehen derzeit davon aus, dass jQuery die meistverwendete JavaScript-Bibliothek ist und jede zweite Website und zwei Drittel der 10.000 meistbesuchten Websites damit arbeiten (Wikipedia – Stand: August 2013). Dabei bezeichnet jQuery im Grunde ein ganzes Habitat an Frameworks, die auf einem Grundsystem – dem eigentlichen jQuery – aufsetzen. Mit den Möglichkeiten dieser Framework-Familie werden sowohl Webseitenersteller, aber auch Webdesigner, JavaScript-Programmierer bis hin zu App-Programmieren glücklich.

Der Kern von jQuery ist ein freies, umfangreiches JavaScript-Framework, das bereits im Januar 2006 veröffentlicht wurde. Mittlerweile wird es als OpenSource-Projekt der jQuery Foundation (https://jquery.org/) weiterentwickelt. Das Framework wird von zahlreichen großen Organisationen und Firmen in unterschiedlichem Rahmen, aber ganz offiziell unterstützt.

Das Kern-Framework jQuery

Das Kern-Framework selbst stellt eine ganze Menge komfortabler Funktionalitäten zur Verfügung, die hauptsächlich JavaScript-Programmierer brauchen. Zum Beispiel zur DOM-Manipulation und –Navigation, Unterstützung von CSS, ein erweitertes Event-System als auch grundlegenden AJAX-Support. Den Download der jeweils aktuellsten Versionen als auch ältere Versionen finden Sie über die Webseite http://jquery.com/. Das gesamte jQuery-Framework besteht im Wesentlichen aus jQuery Core und jQuery UI sowie jQuery Mobile. Aber das Framework ist im Grunde beliebig erweiterbar.

Die PlugIns

Diese Erweiterungen werden PlugIns genannt. Im Grunde handelt es sich um reine JavaScript- und CSS-Bibliotheken mit gewissen Methoden, die aber bestimmte vorgegebene Regeln des Frameworks einhalten müssen. Mittlerweile gibt es eine enorme Anzahl dieser PlugIns, die vielfach über die Webseite von jQuery zur freien (und teils auch kommerziellen) Verfügung gestellt werden. Im Grunde kann jeder jQuery-Entwickler seine PlugIns dort veröffentlichen. Als Webseitenersteller beziehungsweise Anwender des jQuery-Frameworks kann man diese PlugIns benutzen, wenn diese eine Funktionalität bereitstellen, die Sie nicht selbst erstellen wollen und die Ihnen das native Framework nicht bietet.

Die PlugIn-Seite von jQuery

Unter dem URL http://plugins.jquery.com/ finden Sie die offizielle PlugIn-Seite von jQuery. Sie gelangen auch von der normalen jQuery-Webseite auf diese Seite. Dort finden Sie die veröffentlichten PlugIns zahlreicher Programmierer in diversen Kategorien. Und selbstverständlich gibt es Suchmöglichkeiten, um gezielt nach einem PlugIn zu eruieren.

Abbildung 1 Die PlugIn-Seite. Quelle: http://plugins.jquery.com

Abbildung 1 Die PlugIn-Seite. Quelle: http://plugins.jquery.com

Hinweis:

Über die verschiedenen Versionen von jQuery haben sich im Bereich der PlugIns immer wieder umfangreiche Änderungen ergeben. Die Regeln zu einer Veröffentlichung wurden immer wieder geändert und auch die Webseite zum Download von PlugIns immer wieder umstrukturiert. Aktuell basiert eine Veröffentlichung auf einem sogenannten Post-Receive Hook und dem Git-Paketverwaltungssystem – siehe unter http://plugins.jquery.com/docs/publish/.

Abbildung 2 Die Regeln zum Veröffentlichen eines eigenen PlugIns. Quelle: Quelle: http://plugins.jquery.com

Abbildung 2 Die Regeln zum Veröffentlichen eines eigenen PlugIns. Quelle: http://plugins.jquery.com

Ein PlugIn suchen

Wenn Sie ein PlugIn verwenden wollen, welches Ihnen über diese PlugIn-Seite von jQuery vermutlich zur Verfügung gestellt wird, müssen Sie es dort erst einmal finden. Dazu gibt es  auf der Webseite ein Suchformular, in dem Sie Schlagworte eingeben können. Sie müssen dabei vermuten, unter welchen Begriffen der Autor von einem PlugIn sein Produkt getacked hat. Wenn Sie bereits eine Kategorie kennen oder erahnen, können Sie die Suche natürlich darauf einschränken. Aus der Liste der Treffer wählen Sie das für Sie erfolgversprechendste PlugIn über einen Klick auf den entsprechenden Hyperlink aus.

Wie auch immer Sie ein passendes PlugIn finden – auf der folgenden Webseite sollte alles beschrieben sein, was Sie zur Anwendung des PlugIns benötigen – sofern der Programmierer das vernünftig gemacht hat. Beginnend mit einer Beschreibung über den Download, den Abhängigkeiten, eventuellen Lizenzbedingungen bis hin zu der notwendige jQuery- oder jQuery UI-Version. Sie finden dort in der Regel auch eine Vorschau mit einer Beispielapplikation zu diesem PlugIn samt Quellcodes. Zumindest wenn der Programmierer des PlugIns eine solche Seite vorrätig hält. Die Dokumentation der PlugIns ist voll in die übliche jQuery-Dokumentation integriert. Also mit der Beschreibung in einer Übersicht, der Angabe der möglichen Optionen etc.

Abbildung 3 Die Dokumentationsseite eines PlugIns in jQuery selbst. Quelle: http://plugins.jquery.com

Abbildung 3 Die Dokumentationsseite eines PlugIns in jQuery selbst. Quelle: http://plugins.jquery.com

Ein PlugIn verwenden

Wenn Sie nun das PlugIn (also die notwendigen JavaScript- und ggf. CSS-Dateien) geladen haben, müssen Sie es in der Regel nur entsprechend der Dokumentation in Ihre Webseite einbinden und dann die Methoden so aufrufen, wie es in der Dokumentation und den Beispielen beschrieben sein sollte. Das muss man insofern etwas vorsichtig formulieren, denn es liegt in der Verantwortung des PlugIn-Programmiers, dass diese Informationen ausführlich und verständlich zur Verfügung stehen.

Abbildung 4 Eine eigene Seite eines PlugIns-Autors mit Beispielen und einer Dokumentation. Quelle: http://plugins.jquery.com

Abbildung 4 Eine eigene Seite eines PlugIns-Autors mit Beispielen und einer Dokumentation. Quelle: http://plugins.jquery.com

Wenden wir konkret einmal das PlugIn Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/documentation.html) an. Damit kann man ein Bild als Popup in der Webseite anzeigen lassen. Zuerst betrachten wir das notwendige JavaScript, das Sie letztendlich brauchen:

$(function() {
$("#popuplink").magnificPopup({type:'image'});
});

 Listing 1 Alles, was zur Validierung notwendig ist

Wie Sie sehen, ist das ein Einzeiler, bei dem der Selektor von einem Bild einfach vorangestellt wurde. Als Parameter der PlugIn-Methode kann man ganz in der Tradition von jQuery UI das PlugIn mit diversen Optionen modifizieren, wenn das so vorgesehen wurde.

Was Sie noch machen müssen, spielt sich in HTML ab. Sie müssen Referenzen auf jQuery und die notwendige Bibliothek von dem PlugIn notieren. In dem ausgewählten Beispiel etwa so:

       <link rel="stylesheet" href="lib/css/magnific-popup.css">
       <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
       <script src=
       "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
       <!-- Magnific Popup core JS file -->
       <script src="lib/js/jquery.magnific-popup.min.js"></script>
       <script type="text/javascript" src="lib/js/meinscript.js"></script>
  </head>
  <body>
  <a id="popuplink" href="img/b1.jpg">Popup</a>
  </body>
</html>

Listing 2 Die Webseite mit Verwendung des PlugIns

Das PlugIn wird als normale JavaScript-Datei nach der Referenz auf das Framework eingebunden. Falls ein PlugIn auch eigene CSS benötigt, müssen Sie die natürlich auch referenzieren.

Abbildung 5 Die Webseite zeigt nur einen Link zum Öffnen des Popups an

Abbildung 5 Die Webseite zeigt nur einen Link zum Öffnen des Popups an

Abbildung 6 Das Bild wurde im Popup geöffnet

Abbildung 6 Das Bild wurde im Popup geöffnet

Ihre Favoriten

Haben Sie bestimmte Favoriten unter den jQuery-PlugIns? Gefallen Ihnen bestimmte PlugIns besonders gut oder empfinden Sie diese als besonders nützlich? Posten Sie Ihre Empfehlungen!

Hier gibts mehr Informationen zu jQuery von Ralph Steyer.

Ralph Steyer, jQuery