Anzeige
Anzeige
UX & Design
Artikel merken

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“.

6 Min. Lesezeit
Anzeige
Anzeige

Plugins für jQuery – Grundlagen

Zunächst gilt es, eine Grundlage für das Plugin zu schaffen. Plugins sind Methoden, die das Objekt jQuery.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!“)};
Anzeige
Anzeige

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.

Anzeige
Anzeige

In beiden Beispielen ist das Plugin anschließend über

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

ansprechbar.

Das Grundgerüst

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

Anzeige
Anzeige
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.

Anzeige
Anzeige

In den Zeilen 6 bis 8 wird für jedes Element der aktuellen Auswahl nun Code 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:

Anzeige
Anzeige

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.

Anzeige
Anzeige
$(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

Anzeige
Anzeige
$(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.

Anzeige
Anzeige

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.

Ü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 JavaScript, 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!

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
49 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kevin Haferkamp

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
Florian

Hallo,

klingt gut.

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

Gruß

Antworten
Ralf Geschke

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
Oliver Heeger

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
Andy

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

Antworten
spiracle

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
MC

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

Danke und Gruß aus Köln!

Antworten
Dominik Schön

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

Antworten
Stefan

interessant

Antworten
virtualmachine

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

Antworten
Adiasen

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

Antworten
Interose

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

Antworten
Martin

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

Antworten
mwaskowski

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

Antworten
Christoph

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

Antworten
drachenzauberei

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

Antworten
honki

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
Christian Gehrig

Sehr interessant der Framework ! Wiedermal ein Inspirierender Beitrag.

Antworten
Christopher

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

Antworten
Klaus Thieme

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

Antworten
mightyfear

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

Antworten
Micha

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
Philipp

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
dooz

Darum liebe ich jQuery. Es ist einfach genial!

Antworten
JN

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

Antworten
Fussel

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
Benjamin

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
David G.

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
Lars

Interessante Sache. Muss ich mir auch mal anschauen.

Antworten
Torsten

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

Antworten
tomsteg

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
Martin

Vielen Dank für diesen Artikel!

Antworten
Peter

Sehr schönes Tutorial. jQuery ist einfach wunderbar.

Antworten
yoko

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

Besten Dank!

Antworten
Tobias

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
Andreas

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
Andre Krug

Guter Beitrag.

Und das Buch will ich auch ;-)

Antworten
Mario Rimann

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

Antworten
PGampe

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
Katharina

Danke, super Tutorial, kann ich grade bestens gebrauchen.

Freundliche Grüsse
Katharina

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

Antworten
Frederic

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

Frederic

Antworten
Volker

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

Antworten
Mike

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

Antworten
T3_Fan

jQuery ist wirklich eine tolle Sache!

Antworten
FredK

Ich will auch das Buch gewinnen!

Antworten
Andy

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

Antworten
Marc

Kurzer und netter Artikel, danke dafür!

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige