Eigene jQuery Plugins entwickeln – erste Schritte

Kein Beitragsbild

Marcel Weber

Student der Kommunikations- und Softwaretechnik

Mittlerweile stehen auf der offiziellen jQuery Seite unzählige Plugins zum Download bereit. Es existieren unzählige Lösungen für gängige Probleme, manchmal ist aber dann doch nicht die benötigte Funktion vorhanden. Oder sie ist nicht so umgesetzt wie man es erwartet. Das ist aber kein all zu großes Problem, jQuery macht es uns nämlich sehr einfach, eigene Plugins zu entwickeln.

Natürlich sollte man generell das Rad nicht immer neu erfinden. Für die ersten Schritte mit jQuery, zur Weiterbildung oder für private Projekte macht es durchaus Sinn, bereits existierende Funktionsweisen einmal selbst als Plugin umzusetzen. Soll das entwickelte Plugin allerdings veröffentlicht werden, sollte man abwägen ob ein weiteres Plugin mit identischer Funktion wirklich für andere nützlich ist.

Ein einfaches Plugin

Das Plugin das wir in diesem Artikel entwickeln, ist recht einfach, es soll ein DIV entfernen können. Wenn man mit der Maus über ein DIV fährt dann wird ein Button zum Schließen/ Entfernen des DIVs eingeblendet. Wird der Button angeklickt, soll das DIV verschwinden.

Durch einen Klick auf den Button verschwindet das DIV samt enthaltener Grafik

Durch einen Klick auf den Button verschwindet das DIV samt enthaltener Grafik.

Über Sinn und Nützlichkeit kann man sich streiten – als Beispiel für die Entwicklung eines Plugin sollte dieses Beispiel allemal reichen.

Zuerst sollten Sie sich einen passenden Namen für das Plugin überlegen; dieser kann natürlich jederzeit geändert werden. Da das Plugin beziehungsweise die Datei den Namen enthalten sollte, bietet es sich an, diesen schon vor der eigentlichen Entwicklung fix zu machen. Dazu aber später mehr.

Der Quellcode

Hier nun der komplette Quellcode des Plugins, den ich anschließend Zeile für Zeile kommentiere. Kurze Empfehlung vorab: Auf das Dollarzeichen als Alias für Plugins sollten Sie verzichten. Warum ich das Dollarzeichen dennoch benutze, bzw. nutzen kann erkläre ich im Ersten Absatz der Zeilenweisen Erklärung.

(function($) {
$.fn.close = function() {
return this.each(function(){
var sCloseImage = '<img class="close" src="close.png" alt="close" />';
$(this).append(sCloseImage);
$(this).hover(function(){
var offset = $(this).offset();
var iWidth = $(this).outerWidth();
var sTop = offset.top + 5 ;
var sLeft = offset.left + iWidth - 30;
$(".close",this).show().offset({top: sTop , left: sLeft}).click(function(){
$(this).parent().remove();
});
},function(){
$(".close",this).last().hide();
});
});
};
})(jQuery);
(function($) {

Um den Nutzern unseres Plugins die Verwendung von noConflict() und uns in diesem Fall doch die Verwendung des Dollarzeichens als Alias zu ermöglichen, erzeugen wir einfach einen neuen Alias, und zwar das Dollarzeichen. Das Dollarzeichen sollte nicht verwendet werden, da auch andere Framewoks ausser jQuery dieses als Alias verwenden, deshalb kann es hier zu Koflikten kommen. Ich verwende hier das Dollarzeichen nicht wie gewohnt sondern ersetze es durch einen neuen Alias, hier das Dollarzeichen, ich könnte es auch durch einen beliebigen anderen Alias ersetzen.
Nähere Informationen zu dieser Technik und anderen möglichen Techniken um dieses Kopatibilitätsproblem zu vermeiden findet man auf der jQuery Seite.

$.fn.close = function() {

Hier startet nun unser eigentliches Plugin. Das Plugin hat den Namen „close“ und ist eine Methode die das Objekt jQuery.fn erweitert.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
return this.each(function(){

Plugins sollten immer ein Objekt vom Typ jQuery zurückgeben. Mit „this“ greifen wir innerhalb des Plugins auf das Übergebenen Objekt zu.
Da wir ja nicht wissen wie viele DIVs wir Übergeben bekommen führen wir mit der each() Methode den nachfolgenden Code für jedes DIV aus.
Hier startet nun auch die Eigentliche Funktion des Plugins.

var sCloseImage = '<img class="close" src="close.png" alt="close" />';

Hier habe ich einfach den HTML-Code für den Button in eine Variable geschrieben.

$(this).append(sCloseImage);

Das Bild wird dem DIV hinzugefügt.

$(this).hover(function(){
var offset = $(this).offset();

Der Variablen wir die Positon des DIVs zugewiesen.

var iWidth = $(this).outerWidth();

Die Breite des DIVs

var sTop = offset.top + 5 ;

Zum Abstand von oben wird 5 addiert um einen Abstand zum DIV zu erzeugen.

var sLeft = offset.left + iWidth - 30;

Dem Abstand vom linken Rand wird die Breite des DIVs addiert und 30 (25px Grafikbreite + 5px für den Abstand) abgezogen, so dass der Button „auf“ dem DIV liegt.

Wird der Mauszeiger über das entsprechende DIV geführt, werden für jedes DIV die Variablen entsprechend gefüllt. Das muss bei jedem Überfahren gemacht werden, da sich die DIVs ja verschieben können, speziell wenn eines entfernt wurde.

$(".close",this).show().offset({top: sTop , left: sLeft}).click(function(){
$(this).parent().remove();
});

Die Elemente mit der Klasse .close in diesem DIV werden angezeigt mit der show() Mehtode und und ausgerichtet mit offset(). Durch einen Klick auf den Button wird das Eltern-Objekt dieses Buttons entfernt, also das Objekt in dem der Button liegt.

},function(){
$(".close",this).hide();
});

In der Callbackfunktion der hover()-Methode wird das Objekt mit der Klasse .close in diesem DIV ausgeblendet. Sprich: Wenn die Maus nicht mehr auf dem DIV ist, wird der Button wieder ausgeblendet.

});
};
})(jQuery);

Hier wird der Alias dem jQuery-Objekt zugewiesen.

Regeln für die Plugin Entwicklung

Einige Regeln, die bei der Plugin-Entwicklung beachtet werden sollten, habe ich bereits erwähnt. Ich fasse sie hier jedoch noch einmal die, meiner Meinung nach, wichtigsten kurz zusammen.

  • Niemals sollte NUR das Dollarzeichen verwendet werden. (Ausser es wird wie in unserem Fall als neuer Alias gesetz.)
  • Die Datei sollte so benannt werden: jquery.NAME_DES_PLUGINS.js (hier: jquery.close.js)
  • Alle Methoden und Funktionen sollten mit einem Semikolon (;) beendet werden, ansonsten treten Probleme beim Komprimieren des Codes auf.
  • Das Plugin sollte ein jQuery-Objekt zurückgeben.
  • Es sollte die each() Methode verwendet werden, schließlich kann man nicht immer wissen, wie viele Elemente man übergeben bekommt.

Weitere und ausführlichere Informationen finden Sie in der jQuery-Dokumentation.

jQuery Plugin verwenden

Das Plugin müssen Sie jetzt nur noch einbinden, danach können Sie es wie jede andere Methode verwenden.

<!-- jQuery enbinden von Google-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    // jQuery laden
    google.load("jquery", "1.4.2");
  </script>

Natürlich benötigen das jQuery Framework.

<script type="text/javascript" src="jquery.close.js"></script>

Das Plugin wird eingebunden

$(document).ready(function() {
$("div").first().close();
$("#firstDiv").close();
$(".secondDiv").close();
$(".thirdDiv").close();

Es kann wie gewohnt verwendet warden.

$("ul").close();
$("p").close();
});

Und da wir es nicht explizit auf DIVs beschränkt haben, funktioniert es natürlich auch mit anderen DOM-Elementen.

Das Plugin schliesst auch Listen

Das Plugin schließt auch Listen

Wozu soll das gut sein?

Wie bereits gesagt, ging es nicht um das, was Sie mit dem hier entwickelten Plugin anschließend tun können, sondern um ein erstes Beispiel, wie Sie eigene Plugins entwickeln können. Ich hoffe, dass ich die grundsätzlichen Regeln zur Entwicklung eines Plugins leicht verständlich beschrieben habe und dass der Beitrag Ihnen hilft, jQuery für Ihre Projekte sinnvoll einzusetzen. Konstruktive Kommentare und Anregungen für weitergehende Tutorials zur Plugin-Entwicklung beziehungsweise Fragen zu konkreten Problemen sind sehr willkommen.

Demo

Durch einen Klick auf die Grafik öffnet sich das Demo

Durch einen Klick auf die Grafik öffnet sich die Demo

Marcel Weber

Student der Kommunikations- und Softwaretechnik

Sortiert nach:   neueste | älteste | beste Bewertung
Mudder
Gast
Auch wenn ich nun als der böse Bube da stehe doch ich finde dieses Tutorial nicht gut. Der Script-Code ist schlecht strukturiert und bestes Beispiel für einen Fehler ist ja wohl der Block “Plugin einbinden”. Da wird rein gar nichts eingebunden. Es fehlt die Ajax-Lib von Google um google.load verwenden zu können und selbst jquery.close.js, als eigentliches Plugin wird nicht geladen. Auch davon abzuraten $ zu verwenden, es aber im gesamten Tutorial zu benutzen und zu präsentieren ist ebenfalls sehr fragwürdig. Tut mir leid, doch selbst wenn das Grundthema “Plugin-Entwicklung” gut ist, finde ich die Umsetzung sehr zweifelhaft. Dann lieber… Read more »
Mario
Gast

Kannst Du das mit dem $ genauer erklären. Obwohl Du davon abrätst, verwendest Du es. Vielleicht kannst Du das Tutorial so umschreiben, dass es $ nicht mehr verwendet. Denn mir als Newbie erschliessen sich weder Vor- noch Nachteile oder Probleme.

>var sCloseImage = ‘close’;
>Hier habe ich einfach den HTML Code für den Button in eine Variable geschrieben.
Ich vermute, du wolltest da irgendwas wie img src=”” reinschreiben. Vermute ich das richtig?

knarz
Gast

Finde derart Tutorials sehr interessant, aber warum das $ Alias mit einem $ ersetzen? Könnte das nicht noch mehr Probleme in Bezug auf das Zusammenspiel mit anderen Plugins/Scripten geben als dadurch vermieden wird?

Dominik Hahn
Gast

Bitte verwendet ein Plugin zur Syntaxhervorhebung — damit wird der Code lesbarer und damit auch verständlicher. :-)

Naja und vielleicht sollte man die Zugehörigkeit der Texte deutlicher machen. Steht die Beschreibung nun unter den Codezeilen (ja, das tut sie) oder darüber? Das ist nicht auf den ersten Blick klar und sorgt für Verwirrung.

Bei der Gelegenheit möchte ich erwähnen, dass da noch ein

)};

fehlt. Bei einem der letzte Codebeispiele.

trackback

[…] Eigene jQuery Plugins entwickeln – erste Schritte […]

Rick D.
Gast

Sie sollten den Artikel, mit Fokus auf die Rechtschreibung, nochmals überfliegen. Tipp: “Mehtode” :-)

Gruß, Rick.

wpDiscuz