Vorheriger Artikel Nächster Artikel

Webentwicklung: jQuery Plugin How-to – am Beispiel des „virtual pages“-Plugins

Anhand eines konkreten Entwurfs wird in diesem How-to von Andreas Vdovkin gezeigt, wie man Plugins für das JavaScript-Framework jQuery schreibt. Es soll ein jQuery-Plugin erstellt werden, das lange Texte in kleine, leicht lesbare Einheiten einteilt, ein sogenanntes Pagination-Plugin. Außerdem verlosen wir dreimal das Buch „jQuery kurz & gut“.

Webentwicklung: jQuery Plugin How-to – am Beispiel des „virtual pages“-Plugins

Plugins für jQuery - Grundlagen

Zunächst gilt es, eine Grundlage für das zu schaffen. Plugins sind Methoden, die das Objekt .fn erweitern. Dazu gibt es mehrere Möglichkeiten. Eine davon ist, dass man dem Objekt direkt eine anonyme Methode zuweist.

1: jQuery.fn.meinPlugin = function() { alert(„Steve Holt!“)};


In diesem Artikel wird jQuery.fn.extend verwendet, diese Methode erweitert das „fn“-Objekt um alle Methoden, die das Parameter Objekt enthält.

1: var paramObj = {
2:    meinPlugin: function() {alert(„Steve Holt!“);}
3: };
4: jQuery.fn.extend(paramObj);


Die Verwendung dieser Methode ist besonders dann sehr effizient, wenn man mehrere Plugins in einem Rutsch zuweisen will.

In beiden Beispielen ist das Plugin anschließend über

jQuery(“#beispiel“).meinPlugin();


ansprechbar.

Das Grundgerüst

Der nachfolgende Codeblock kann – abgesehen vom Plugin-Namen - als generelles Muster für jQuery- Plugins angesehen werden:

1: (function($){
2: 	$.fn.extend({
3: 	    virtualPages:function(params){
4: 	        var conf = {};
5:		  $.extend(conf, params);
6:		  return $(this).each(function(){
7:                // Die eigentliche Funktionalität
8:             });
9:	    }
10:	});
11: })(jQuery);


Die Zeilen 1 und 11 geben einen Rahmen vor, in dem man sicher sein kann, dass selbst wenn jemand den Kompatibilitätsmodus verwendet, der Zugriff auf das jQuery-Objekt über das Alias „$“ möglich ist. Dies gilt nur innerhalb des Rahmens, das Programmierkonzept dahinter heißt Closure.

In den Zeilen 2 und 10 wird jQuery.fn.extend benutzt um das jQuery-Objekt um die Methoden die das übergebene Objekt enthält, zu erweitern.

Die Zeilen 3 bis 9 enthalten die anonyme Funktion, die das eigentliche Plugin darstellt. Die Methodensignatur enthält einen Parameter, der aber per Sprachdefinition optional ist.

In den Zeilen 6 bis 8 wird für jedes Element der aktuellen Auswahl nun ausgeführt, der den eigentlichen Plugin darstellt.

Die Idee/Der Algorithmus

Jeder längere Text enthält in der Regel Absätze. Diese Tatsache kann man nutzen, um den Text in mehrere Blöcke zu teilen, die nacheinander angezeigt werden, damit der User nicht weit scrollen muss.

Als Algorithmus sieht das in etwa wie folgt aus:

Für jeden Absatz: Prüfe, ob die aktuelle Seite genug Platz dafür hat. Wenn ja: Füge den Absatz in die Seite ein. Wenn nein: Erstelle eine neue Seite und füge den Text dort ein. Solange wiederholen, bis alle Absätze einer virtuellen Seite zugewiesen sind.

Für dieses Beispiel gehe ich von folgender Situation aus: Der Text steckt in einem Rahmen (<div>) und jeder Absatz ist ein Paragraph, d.h. der Text wird umrahmt von <p>-Elementen.

<div id=“text“>
  <p>erster Absatz […]</p>
  <p>zweiter Absatz […]</p>
</div>


Das Plugin soll auf den Text angewandt werden.

$(function(){
    $(“#text“).virtualPages();
});


Dabei sollen jeweils so viele Paragraphen in ein <div>-Element eingefügt werden, dass diese einen vorher festgelegten Rahmen nicht überschreiten.

Die Umsetzung

Die virtuellen Seiten werden im Plugin selbst durch die Variable page vertreten. Die Variable page zeigt auf die virtuelle Seite, die zuletzt erstellt worden ist. Zusätzlich zur Variable page gibt es noch visPage, dies ist der Verweis auf die aktuell sichtbare Seite.

Zunächst werden alle Kinder des Elements, das bearbeitet werden soll, gesucht. Dies wird durch

$(this).children()


ausgeführt. Auf diesen Elementen kann erneut eine for each-Schleife ausgeführt werden, welche jQuery durch die Methode each und die Übergabe einer Callback-Methode realisiert. Der Vorteil dieser Vorgehensweise ist, dass man den Objektkontext this für den Zugriff auf das aktuelle Element der Schleife nutzen kann.

1:$(this).children().each(function(){
2:    if (!page || ($(this).height() + page.height() > conf.height))
3:        createPage();
4:    page.append(this);
5:});


In der each Callback-Methode wird zunächst geprüft, ob es überhaupt eine Seite gibt (Zeile 2). Wenn es eine Seite gibt, wird geprüft, ob die Höhe der Seite plus der Höhe des aktuellen Kind-Elements die maximal zulässige Höhe überschreiten. Wenn dies der Fall ist, wird eine neue Seite erstellt.

In der letzten Zeile der Callback-Methode wird das aktuelle Kind-Element der aktuellen Seite hinzugefügt.

Dieses Beispiel zeigt zwei externe Referenzen. Die Variable page muss im darüber liegenden Kontext (also innerhalb des Plugin-Rumpfs und vor dem $(this).children().each() Aufruf) definiert werden. Die Methode createPage muss dafür sorgen, dass im selben Kontext ein Seitenelement erzeugt wird.

1: function createPage(){
2:    var elem = $('<div></div<').addClass(conf.pageClass)
3:        .data('pageNr',++pageNum);
4:    if (typeof(page) == 'undefined') {
5:	  visPage = elem.prependTo($this).show();
6:    } else elem.insertAfter(page).hide();
7:    page = elem;
8:}


In Zeile 2 der Methode createPage wird das Seitenelement erstellt. In Zeile 3 wird der laufende Index der Seite im Datenattribut „pageNr“ gespeichert. In Zeile 4 wird geprüft, ob es bereits ein Seitenelement gibt. Falls nicht, wird das gerade erstellte Element in Zeile 5 durch die Zuweisung zur Variable visPage zur ersten sichtbaren Seite hinzugefügt, nachdem es dem Element hinzugefügt wurde, das durch das Plugin verarbeitet wird. Falls es bereits ein Seitenelement gibt, wird das Element in Zeile 6 hinter die letzte Seite angehängt. In Zeile 7 wird schließlich das neu erstellte Element durch Zuweisung zur Variable page als aktuelle Seite gekennzeichnet.

$.fn.extend({
    myPlugin: function(){
        var $this = $(this), page, visPage, pages = [];
    }
});


Die Variable $this ist keine jQuery-Besonderheit, sondern wird im Plugin-Kontext für den Schnellzugriff definiert. Dies erspart unnötige Suchen und man kann es in allen Funktionen benutzen, die innerhalb des Plugins erstellt werden.

Das Plugin hat nun alles, was es benötigt, um die gefundenen Elemente in mehrere virtuelle Seiten einzuteilen. Lediglich der Zugriff auf die Seiten fehlt noch. Dafür muss eine Navigation erstellt werden. Der Einfachheit halber soll für jede virtuelle Seite ein Link generiert werden, der die entsprechende virtuelle Seite öffnet.

01: function createPageLinks(){
02:	if (pages.length < 2) return;
03:	var box = $('<div class="virtual_pages_links"></div>');
04:	$(pages).each(function(){
05:	    	var elem = $(this);
06:		var text = conf.linkText.replace('%', elem.data("pageNr"));
07:		$('<a>' + text + '</a>')
08:			.attr('href', document.location.href).click(function(e){
09:			if (elem.is(':hidden')){
10:				visPage.slideUp();
11:				visPage = elem.slideDown();
12:			}
13:			e.preventDefault(); // Link soll nicht geöffnet werden
14:		}).appendTo(box).after(' ');
15:	});
16:	return box;
17:}


Diese Methode generiert Seitenlinks. Zunächst wird geprüft, ob mehr als eine Seite vorhanden ist. Sollte nur eine Seite vorhanden sein, wird angenommen, dass diese bereits sichtbar ist und die Links nicht generiert werden müssen. In den Zeilen 4 bis 15 wird für jedes Seitenelement ein Link erstellt und direkt mit einem Event Handler für den Event Click versehen. Der Index jedes Elements ist im Datenattribut pageNr gespeichert und wird dort abgerufen, um den Text des Links zu bilden. Als Text wird der Konfigurationswert linkText benutzt, wobei hier das Prozentzeichen als Platzhalter für die Seitenzahl verwendet wird. In Zeile 9 wird geprüft, ob die zu dem Link zugehörige Seite unsichtbar ist. Nur in diesem Fall wird dann veranlasst, dass die aktuell sichtbare Seite versteckt und die dem Link zugehörige Seite angezeigt wird. In derselben Zeile wird die nun „geöffnete“ Seite als sichtbare Seite zwischengespeichert.

Der Aufruf der Methode preventDefault auf dem Event Objekt sorgt dafür, dass der vorher erstellte Link nicht aktiviert wird.

Wenn man an diesem Punkt angekommen ist, ist das Plugin fertig und kann noch beliebig erweitert werden. Denkbar wäre es beispielsweise, die Methode zum Generieren der Links austauschbar zu machen oder aber mit mehr Konfigurationsmöglichkeiten flexibler zu gestalten.

Basierend auf dem Code aus dem vierten Code-Beispiel können beliebig Plugins erstellt werden. Das Beispiel stellt dabei den kleinsten gemeinsamen Nenner dar. Die Projektseite für das im Rahmen dieses Tutorials erstellte Plugin findet sich hier.

Über den Gastautor

Andreas Vdovkin ist Software-Entwickler und Autor des bei O'Reilly erschienenen „jQuery - kurz & gut“. Darin vermittelt er dem Leser zu Beginn die notwendigen Grundlagen von , dem W3C-Dokumentenmodell und die grundlegende Arbeitsweise mit jQuery. „Suchen“ und „Ändern“ stellen die Kernkapitel der Befehlsreferenz dar und beschreiben die Navigation und Manipulation von DOM-Elementen.

Verlosung: 3x „jQuery kurz & gut“

Wer noch mehr über jQuery erfahren möchte, kann eines von drei Ausgaben von „jQuery kurz & gut“ gewinnen. Hinterlasst dazu einfach hier einen Kommentar. Wir verlosen am Mittwoch, 14. April, 12 Uhr unter allen Kommentaren. Da wir die Gewinner per E-Mail informieren, gebt unbedingt eine korrekte Adresse an. Viel Glück!

 

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
48 Antworten
  1. von Kevin Haferkamp am 07.04.2010 (09:46 Uhr)

    Wie immer ein super Beitrag!
    Das es so einfach ist, eigene PlugIns für jQuery zu entwickeln, hätte ich nicht gedacht, allerdings beschäftige ich mich auch erst kurze Zeit mit JavaScript und jQuery als Framework.

    Ich freue mich auf weitere interessante Artikel!

    Gruß
    Kevin Haferkamp

    Antworten Teilen
  2. von Florian am 07.04.2010 (09:56 Uhr)

    Hallo,

    klingt gut.

    Mich würde interessieren, wie dies in der Praxis aussieht. Habt ihr denn eine Beispiel-Seite parat?

    Gruß

    Antworten Teilen
  3. von Ralf Geschke am 07.04.2010 (10:09 Uhr)

    Hallo!

    Plugins sind die eine Sache - noch relativ einfach zu entwickeln.
    Bei jQuery UI Widgets sieht es schon anders aus, hier sind die ersten Hürden IMHO etwas höher. Heisst, ich würde gerne mehr darüber lesen. ;-)

    Beste Gruesse,
    Ralf

    Antworten Teilen
  4. von Oliver Heeger am 07.04.2010 (10:09 Uhr)

    Sehr schöner Teaser für das Buch welches ich echt gerne gewinnen würde...
    Vielleicht hilft es mir endlich mich von Mootools zu lösen ;)

    Oliver

    Antworten Teilen
  5. von Andy am 07.04.2010 (10:11 Uhr)

    hallo,
    wieder mal ein sehr hilfreicher beitrag!
    Vielen Dank dafür

    Antworten Teilen
  6. von spiracle am 07.04.2010 (10:14 Uhr)

    Ich denke, dass die Plugin Entwicklung gerade für jQuery immer wichtiger wird - so wie für TYPO3 die Extensionentwicklung.
    Vieles wird man sicher wiederverwenden können und hat dann immer sein Plugin zur Verfügung.
    Fehlt nur noch ein zentrales Repository dafür …

    Antworten Teilen
  7. von MC am 07.04.2010 (10:14 Uhr)

    Wieder ein Artikel, der bewirkt, dass das Frühstück noch etwas warten muss ;-)

    Danke und Gruß aus Köln!

    Antworten Teilen
  8. von Dominik Schön am 07.04.2010 (10:16 Uhr)

    Super, genau danach habe ich lange gesucht. Ein kleines Template, das man immer wieder verwenden kann. Danke!

    Antworten Teilen
  9. von Stefan am 07.04.2010 (10:17 Uhr)

    interessant

    Antworten Teilen
  10. von virtualmachine am 07.04.2010 (10:21 Uhr)

    Sehr schönes Grundgerüst.
    Wenn man den Artikel so liest, dann ist es ja eigentlich gar nicht so ein Krampf ;-)

    Antworten Teilen
  11. von Adiasen am 07.04.2010 (10:21 Uhr)

    Danke für den Artikel - finde jQuery absolut Klasse, habe es schon in einigen Projekten eingesetzt :)

    Antworten Teilen
  12. von Interose am 07.04.2010 (10:34 Uhr)

    Vielen Dank für das HowTo - vielleicht ist das Buch ja der entsprechende Ansporn endlich ein eigenes Plugin zu verfassen ;)

    Antworten Teilen
  13. von Martin am 07.04.2010 (10:38 Uhr)

    Sehr interessanter Artikel, gut verständlich einfach erklärt.
    Weitere solche informative Artikel in der ZUkunft wären toll!

    Antworten Teilen
  14. von mwaskowski am 07.04.2010 (10:49 Uhr)

    schönes Howto, das Buch zu gewinnen wäre echt super :-)

    Antworten Teilen
  15. von Christoph am 07.04.2010 (11:00 Uhr)

    Guter Artikel für den jQuery Einstieg.
    Über das Buch würde ich mich auch sehr freuen ;-)

    Antworten Teilen
  16. von drachenzauberei am 07.04.2010 (11:02 Uhr)

    Danke für den Artikel. Könnte man ja ganz gut für eine FAQ verwenden,

    Antworten Teilen
  17. von honki am 07.04.2010 (11:05 Uhr)

    Etwas Ähnliches habe ich vor kurzem auch programmiert, allerdings bei weitem nicht so elegant. Das Buch täte hier vielleicht etwas Abhilfe leisten. Es würde mich sehr freuen, falls ich es gewinnen sollte.

    Antworten Teilen
  18. von Christian Gehrig am 07.04.2010 (11:43 Uhr)

    Sehr interessant der Framework ! Wiedermal ein Inspirierender Beitrag.

    Antworten Teilen
  19. von Christopher am 07.04.2010 (11:45 Uhr)

    Schönes Tutorial zum Einstieg in die eigene Erweiterung von jQuery.

    Antworten Teilen
  20. von Klaus Thieme am 07.04.2010 (11:54 Uhr)

    Klasse Beitrag, finde jQuery einfach großartig.
    Würde mir wünschen dass hier mehr über jQuery berichtet wird.

    Antworten Teilen
  21. von mightyfear am 07.04.2010 (11:57 Uhr)

    Interessanter Artikel, wäre nicht schlecht wenn es dazu mehr zu Dojo geben würde :)

    Antworten Teilen
  22. von Micha am 07.04.2010 (12:28 Uhr)

    Ich nutze mittlerweile auch nur noch jquery (hatte vorher verschiedene andere Frameworks ausprobiert). Mit jquery is alles schön überscihtlich und dank jquery tools sind auch komplexe anwendungen kein Problem mehr.

    PS: Ich würd mich auch über das Buch freuen ;)

    Antworten Teilen
  23. von Philipp am 07.04.2010 (13:10 Uhr)

    Das ist ja echt ein Kinderspiel ein solches Plugin zu entwickeln, wenn man das hier so liest. Es ist wirklich gut und einfach beschrieben und ermöglicht einen leichten Einstieg in die Entwicklung.
    Danke!

    Antworten Teilen
  24. von dooz am 07.04.2010 (13:38 Uhr)

    Darum liebe ich jQuery. Es ist einfach genial!

    Antworten Teilen
  25. von JN am 07.04.2010 (16:41 Uhr)

    Super Beitrag ;)
    jQuery überzeugt immer mehr, auch seit letzten Updates durch Größe und Schnelligkeit.

    Antworten Teilen
  26. von Fussel am 07.04.2010 (16:52 Uhr)

    jquery ist einfach klasse.
    werde mich heut abend wohl mal an ein kleines jquery plugin wagen... habe da auch schon eine idee
    danke für die schöne anleitung

    Antworten Teilen
  27. von Benjamin am 07.04.2010 (17:43 Uhr)

    Ich programmier auch schon seit geraumer Zeit diverse jQuery Plugins und muss immer wieder feststellen wie mächtig jQuery ist. Ich würde sogar behaupten es ist nichts mehr unmöglich.

    Desweiteren sei gesagt, dass man sehr vorsichtig mit Javascript umgehen muss. Es ist schliesslich eine Clientbasierte Sprache. Ist die Seite also mit Effekten vollgepackt, kann es auf älteren PC´s sehr langsam zugehen.

    Antworten Teilen
  28. von David G. am 07.04.2010 (18:13 Uhr)

    Guter Beitrag! Da ich mich beruflich auch viel mit JQuery beschäftige und ich das Thema "Plugins" da noch nicht in aller Ausführlichkeit durchleben durfte ist dies sehr hilfreich!

    Über das Buch würde ich mich sehr freuen :-)

    Antworten Teilen
  29. von Lars am 07.04.2010 (18:55 Uhr)

    Interessante Sache. Muss ich mir auch mal anschauen.

    Antworten Teilen
  30. von Torsten am 07.04.2010 (22:51 Uhr)

    Das muss ich mir mal in Ruhe durchlesen. Am besten in dem Buch ... ;-)

    Antworten Teilen
  31. von tomsteg am 07.04.2010 (23:07 Uhr)

    Interessante Möglichkeit mit dem 'extend'. Muss ich gleich mal mit meiner am meisten vermissten Funktion bei jQuery ausprobieren: toJSON. Danke für die Tipps.

    Antworten Teilen
  32. von Martin am 07.04.2010 (23:20 Uhr)

    Vielen Dank für diesen Artikel!

    Antworten Teilen
  33. von Peter am 08.04.2010 (07:26 Uhr)

    Sehr schönes Tutorial. jQuery ist einfach wunderbar.

    Antworten Teilen
  34. von yoko am 08.04.2010 (10:02 Uhr)

    Benötige dieses Tutorial grade nicht zwangsläufig, es wird aber ordentlich in den Favoriten abgelegt ;)

    Besten Dank!

    Antworten Teilen
  35. von Tobias am 08.04.2010 (13:59 Uhr)

    jQuery ist einfach so übersichtlich, dass der Großteil des Codes überhaupt keine Erklärung benötigt. Kenne kein Framework, das Code ausführen kann, der sich selbst erklärt.

    Trotzdem eine kleine Frage zu
    $.fn.extend({
    myPlugin: function(){ ...

    hier kann ich doch dann auch noch eine weitere Funktion gleich mit anhängen - frei nach dem Muster wunschFunktion: function(){ ... }, oder?

    Ps.: An dem Buch wäre ich natürlich auch sehr interessiert

    Antworten Teilen
  36. von Andreas am 08.04.2010 (14:01 Uhr)

    Ja, an der Stelle können beliebig viele Methoden übergeben werden.

    $.fn.extend({
    fn1: function(){},
    fn2: function(){}
    });

    führt dazu das:
    $(selector).fn1();
    $(selector).fn2();

    verfügbar werden.

    Antworten Teilen
  37. von Andre Krug am 09.04.2010 (17:19 Uhr)

    Guter Beitrag.

    Und das Buch will ich auch ;-)

    Antworten Teilen
  38. von Mario Rimann am 09.04.2010 (22:03 Uhr)

    Danke für den sehr informativen Artikel! Wär schön, das Buch zu gewinnen :-)

    Antworten Teilen
  39. von PGampe am 10.04.2010 (00:54 Uhr)

    Der letzte Link auf die Projektseite liefert einen 500 (Samstag, April 10 2010 00:51:32).
    Ansonsten Danke für diese kurze und nette Einführung

    Grüße
    Phil

    Antworten Teilen
  40. von Katharina am 10.04.2010 (08:57 Uhr)

    Danke, super Tutorial, kann ich grade bestens gebrauchen.

    Freundliche Grüsse
    Katharina

    P.S.: Das Buch wäre toll.

    Antworten Teilen
  41. von Frederic am 10.04.2010 (08:58 Uhr)

    So einfach hatte ich mir das nicht vorgestellt.
    Klasse das Tut. Mehr davon.

    Frederic

    Antworten Teilen
  42. von Volker am 12.04.2010 (21:34 Uhr)

    Würde mich sehr über das Buch freuen.
    Wollte schon länger den Einstieg in jQuery wagen.

    Antworten Teilen
  43. von Mike am 13.04.2010 (12:25 Uhr)

    Wirklich ein interessanter Beitrag.
    jQuery ist wirklich ein absolut schönes Frameswork!

    Antworten Teilen
  44. von T3_Fan am 13.04.2010 (13:13 Uhr)

    jQuery ist wirklich eine tolle Sache!

    Antworten Teilen
  45. von FredK am 13.04.2010 (14:11 Uhr)

    Ich will auch das Buch gewinnen!

    Antworten Teilen
  46. von Andy am 13.04.2010 (22:26 Uhr)

    Sehr schöner Artikel - mein persönlicher Favorit des t3n Newsletters 99.

    Antworten Teilen
  47. von Marc am 14.04.2010 (11:48 Uhr)

    Kurzer und netter Artikel, danke dafür!

    Würde mich sicherlich auch über das ganze Buch freuen :)...

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema jQuery
Vivus: JavaScript erweckt eure SVGs zum Leben
Vivus: JavaScript erweckt eure SVGs zum Leben

Mit der JavaScript-Library Vivus könnt ihr auf einfache Art und Weise eure SVG-Dateien animieren. Das Skript arbeitet unabhängig und liefert tolle Ergebnisse. » weiterlesen

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

Kennst Du schon unser t3n Magazin?

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