Drücke die Tasten ◄ ► für weitere 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!

 

Empfiehl diesen Artikel jetzt weiter!

Bewerten
VN:F [1.9.22_1171]
49 Antworten
  1. von Kevin Haferkamp am 07.04.2010 (09:46Uhr)

    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

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

    Hallo,

    klingt gut.

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

    Gruß

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

    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

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

    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

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

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

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

    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 …

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

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

    Danke und Gruß aus Köln!

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

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

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

    interessant

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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.

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

    Sehr interessant der Framework ! Wiedermal ein Inspirierender Beitrag.

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

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

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

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

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

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

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

    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 ;)

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

    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!

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

    Darum liebe ich jQuery. Es ist einfach genial!

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

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

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

    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

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

    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.

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

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

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

    Interessante Sache. Muss ich mir auch mal anschauen.

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

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

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

    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.

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

    Vielen Dank für diesen Artikel!

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

    Sehr schönes Tutorial. jQuery ist einfach wunderbar.

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

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

    Besten Dank!

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

    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

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

    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.

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

    Guter Beitrag.

    Und das Buch will ich auch ;-)

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

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

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

    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

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

    Danke, super Tutorial, kann ich grade bestens gebrauchen.

    Freundliche Grüsse
    Katharina

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

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

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

    Frederic

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

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

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

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

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

    jQuery ist wirklich eine tolle Sache!

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

    Ich will auch das Buch gewinnen!

  46. von Geld Verdienen? | neue ernergie konzept am 13.04.2010 (21:57Uhr)

    [...] Webentwicklung: jQuery Plugin How-to – am Beispiel des „virtual … [...]

  47. von Andy am 13.04.2010 (22:26Uhr)

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

  48. von Marc am 14.04.2010 (11:48Uhr)

    Kurzer und netter Artikel, danke dafür!

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

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema jQuery
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code

Du bist Anfänger und setzt keine oder kaum Coding-Conventions ein? Dann solltest du diesen Artikel lesen, denn darin lest ihr wie ihr die Qualität eures JavaScript-Codes verbessern könnt: mit... » weiterlesen

jQuery: 13 Plugins für euer nächstes Webprojekt
jQuery: 13 Plugins für euer nächstes Webprojekt

Webentwicklung ohne JavaScript, im Besonderen jQuery, ist heute fast nicht mehr vorstellbar. Deswegen zeigen wir euch 13 jQuery-Plugins, die ihr vielleicht noch nicht kennt, aber unbedingt... » 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

Kennst Du schon unser t3n Magazin?

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