Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Marcel Weber 4. Mai 2010

Eigene jQuery Plugins entwickeln – erste Schritte

Mittlerweile ste­hen auf der offi­zi­el­len jQuery Seite unzäh­li­ge Plugins zum Download bereit. Es exis­tie­ren unzäh­li­ge Lösungen für gän­gi­ge Probleme, manch­mal ist aber dann doch nicht die benö­tig­te Funktion vor­han­den. Oder sie ist nicht so umge­setzt wie man es erwar­tet. Das ist aber kein all zu gro­ßes Problem, jQuery macht es uns näm­lich sehr ein­fach, eige­ne Plugins zu ent­wi­ckeln.

Natürlich soll­te man gene­rell das Rad nicht immer neu erfin­den. Für die ers­ten Schritte mit jQuery, zur Weiterbildung oder für pri­va­te Projekte macht es durch­aus Sinn, bereits exis­tie­ren­de Funktionsweisen ein­mal selbst als Plugin umzu­set­zen. Soll das ent­wi­ckel­te Plugin aller­dings ver­öf­fent­licht wer­den, soll­te man abwä­gen ob ein wei­te­res Plugin mit iden­ti­scher Funktion wirk­lich für ande­re nütz­lich ist.

Ein einfaches Plugin

Das Plugin das wir in die­sem Artikel ent­wi­ckeln, ist recht ein­fach, es soll ein DIV ent­fer­nen kön­nen. Wenn man mit der Maus über ein DIV fährt dann wird ein Button zum Schließen/ Entfernen des DIVs ein­ge­blen­det. Wird der Button ange­klickt, soll das DIV ver­schwin­den.

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

Durch einen Klick auf den Button ver­schwin­det das DIV samt ent­hal­te­ner Grafik.

Über Sinn und Nützlichkeit kann man sich strei­ten – als Beispiel für die Entwicklung eines Plugin soll­te die­ses Beispiel alle­mal rei­chen.

Zuerst soll­ten Sie sich einen pas­sen­den Namen für das Plugin über­le­gen; die­ser kann natür­lich jeder­zeit geän­dert wer­den. Da das Plugin bezie­hungs­wei­se die Datei den Namen ent­hal­ten soll­te, bie­tet es sich an, die­sen schon vor der eigent­li­chen Entwicklung fix zu machen. Dazu aber spä­ter mehr.

Der Quellcode

Hier nun der kom­plet­te Quellcode des Plugins, den ich anschlie­ßend Zeile für Zeile kom­men­tie­re. Kurze Empfehlung vor­ab: Auf das Dollarzeichen als Alias für Plugins soll­ten Sie ver­zich­ten. Warum ich das Dollarzeichen den­noch benut­ze, bzw. nut­zen 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 unse­res Plugins die Verwendung von noConflict() und uns in die­sem Fall doch die Verwendung des Dollarzeichens als Alias zu ermög­li­chen, erzeu­gen wir ein­fach einen neu­en Alias, und zwar das Dollarzeichen. Das Dollarzeichen soll­te nicht ver­wen­det wer­den, da auch ande­re Framewoks aus­ser jQuery die­ses als Alias ver­wen­den, des­halb kann es hier zu Koflikten kom­men. Ich ver­wen­de hier das Dollarzeichen nicht wie gewohnt son­dern erset­ze es durch einen neu­en Alias, hier das Dollarzeichen, ich könn­te es auch durch einen belie­bi­gen ande­ren Alias erset­zen.
Nähere Informationen zu die­ser Technik und ande­ren mög­li­chen Techniken um die­ses Kopatibilitätsproblem zu ver­mei­den fin­det man auf der jQuery Seite.

$.fn.close = function() {

Hier star­tet nun unser eigent­li­ches Plugin. Das Plugin hat den Namen „clo­se“ und ist eine Methode die das Objekt jQuery.fn erwei­tert.

return this.each(function(){

Plugins soll­ten immer ein Objekt vom Typ jQuery zurück­ge­ben. Mit „this“ grei­fen wir inner­halb des Plugins auf das Übergebenen Objekt zu.
Da wir ja nicht wis­sen wie vie­le DIVs wir Übergeben bekom­men füh­ren wir mit der each() Methode den nach­fol­gen­den Code für jedes DIV aus.
Hier star­tet nun auch die Eigentliche Funktion des Plugins.

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

Hier habe ich ein­fach den HTML-Code für den Button in eine Variable geschrie­ben.

$(this).append(sCloseImage);

Das Bild wird dem DIV hin­zu­ge­fügt.

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

Der Variablen wir die Positon des DIVs zuge­wie­sen.

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 erzeu­gen.

var sLeft = offset.left + iWidth - 30;

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

Wird der Mauszeiger über das ent­spre­chen­de DIV geführt, wer­den für jedes DIV die Variablen ent­spre­chend gefüllt. Das muss bei jedem Überfahren gemacht wer­den, da sich die DIVs ja ver­schie­ben kön­nen, spe­zi­ell wenn eines ent­fernt wur­de.

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

Die Elemente mit der Klasse .clo­se in die­sem DIV wer­den ange­zeigt mit der show() Mehtode und und aus­ge­rich­tet mit off­set(). Durch einen Klick auf den Button wird das Eltern-Objekt die­ses Buttons ent­fernt, 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 die­sem DIV aus­ge­blen­det. Sprich: Wenn die Maus nicht mehr auf dem DIV ist, wird der Button wie­der aus­ge­blen­det.

});
};
})(jQuery);

Hier wird der Alias dem jQuery-Objekt zuge­wie­sen.

Regeln für die Plugin Entwicklung

Einige Regeln, die bei der Plugin-Entwicklung beach­tet wer­den soll­ten, habe ich bereits erwähnt. Ich fas­se sie hier jedoch noch ein­mal die, mei­ner Meinung nach, wich­tigs­ten kurz zusam­men.

  • Niemals soll­te NUR das Dollarzeichen ver­wen­det wer­den. (Ausser es wird wie in unse­rem Fall als neu­er Alias gesetz.)
  • Die Datei soll­te so benannt wer­den: jquery.NAME_DES_PLUGINS.js (hier: jquery.close.js)
  • Alle Methoden und Funktionen soll­ten mit einem Semikolon (;) been­det wer­den, ansons­ten tre­ten Probleme beim Komprimieren des Codes auf.
  • Das Plugin soll­te ein jQuery-Objekt zurück­ge­ben.
  • Es soll­te die each() Methode ver­wen­det wer­den, schließ­lich kann man nicht immer wis­sen, wie vie­le Elemente man über­ge­ben bekommt.

Weitere und aus­führ­li­che­re Informationen fin­den Sie in der jQuery-Dokumentation.

jQuery Plugin verwenden

Das Plugin müs­sen Sie jetzt nur noch ein­bin­den, danach kön­nen Sie es wie jede ande­re Methode ver­wen­den.

<!-- 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ö­ti­gen das jQuery Framework.

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

Das Plugin wird ein­ge­bun­den

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

Es kann wie gewohnt ver­wen­det war­den.

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

Und da wir es nicht expli­zit auf DIVs beschränkt haben, funk­tio­niert es natür­lich auch mit ande­ren 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 ent­wi­ckel­ten Plugin anschlie­ßend tun kön­nen, son­dern um ein ers­tes Beispiel, wie Sie eige­ne Plugins ent­wi­ckeln kön­nen. Ich hof­fe, dass ich die grund­sätz­li­chen Regeln zur Entwicklung eines Plugins leicht ver­ständ­lich beschrie­ben habe und dass der Beitrag Ihnen hilft, jQuery für Ihre Projekte sinn­voll ein­zu­set­zen. Konstruktive Kommentare und Anregungen für wei­ter­ge­hen­de Tutorials zur Plugin-Entwicklung bezie­hungs­wei­se Fragen zu kon­kre­ten Problemen sind sehr will­kom­men.

Demo

Durch einen Klick auf die Grafik öffnet sich das Demo

Durch einen Klick auf die Grafik öff­net sich die Demo

Marcel Weber

Student der Kommunikations- und Softwaretechnik

7 Kommentare

  1. Sie soll­ten den Artikel, mit Fokus auf die Rechtschreibung, noch­mals über­flie­gen. Tipp: “Mehtode” :-)

    Gruß, Rick.

  2. @Dominik Hahn: Welches Codebeispiel meinst du? Ich fin­de die Entsprechende stel­le lei­der nicht.

  3. Bitte ver­wen­det ein Plugin zur Syntaxhervorhebung — damit wird der Code les­ba­rer und damit auch ver­ständ­li­cher. :-)

    Naja und viel­leicht soll­te man die Zugehörigkeit der Texte deut­li­cher machen. Steht die Beschreibung nun unter den Codezeilen (ja, das tut sie) oder dar­über? Das ist nicht auf den ers­ten Blick klar und sorgt für Verwirrung.

    Bei der Gelegenheit möch­te ich erwäh­nen, dass da noch ein

    )};

    fehlt. Bei einem der letz­te Codebeispiele.

  4. Finde der­art Tutorials sehr inter­es­sant, aber war­um das $ Alias mit einem $ erset­zen? Könnte das nicht noch mehr Probleme in Bezug auf das Zusammenspiel mit ande­ren Plugins/Scripten geben als dadurch ver­mie­den wird?

  5. @Mudder: Ich gebe dir voll­kom­men Recht, ich habe den Code für die Plugineinbindung gera­de über­ar­bei­tet, der Code ging beim Formatieren lei­der ver­lo­ren.

    Warum ich das Dollarzeichen den­noch benut­ze habe ich auch noch ein­mal näher erläu­tert, das stand aber auch schon vor­her im Artikel, viel­leicht nicht ganz so ersicht­lich. Die Erklärung ist im ers­ten Abschnitt der Zeilenweisen Erklärung zu fin­den.

    @Mario: Ich habe HTML Code für ein Bild in die Variable geschrie­ben, die­ser wur­de dann aber lei­der gleich umge­setzt und dann der alt-Text des Bildes ange­zeigt. Dies habe ich aber auch beho­ben.

    Ich hof­fe es wird nun alles rich­tig Dargestellt und ist ersicht­lich.

  6. Kannst Du das mit dem $ genau­er erklä­ren. Obwohl Du davon abrätst, ver­wen­dest Du es. Vielleicht kannst Du das Tutorial so umschrei­ben, dass es $ nicht mehr ver­wen­det. Denn mir als Newbie erschlies­sen sich weder Vor- noch Nachteile oder Probleme.

    >var sCloseImage = ‘clo­se’;
    >Hier habe ich ein­fach den HTML Code für den Button in eine Variable geschrie­ben.
    Ich ver­mu­te, du woll­test da irgend­was wie img src=”” rein­schrei­ben. Vermute ich das rich­tig?

  7. Auch wenn ich nun als der böse Bube da ste­he doch ich fin­de die­ses Tutorial nicht gut.
    Der Script-Code ist schlecht struk­tu­riert und bes­tes Beispiel für einen Fehler ist ja wohl der Block “Plugin ein­bin­den”. Da wird rein gar nichts ein­ge­bun­den. Es fehlt die Ajax-Lib von Google um google.load ver­wen­den zu kön­nen und selbst jquery.close.js, als eigent­li­ches Plugin wird nicht gela­den.

    Auch davon abzu­ra­ten $ zu ver­wen­den, es aber im gesam­ten Tutorial zu benut­zen und zu prä­sen­tie­ren ist eben­falls sehr frag­wür­dig.

    Tut mir leid, doch selbst wenn das Grundthema “Plugin-Entwicklung” gut ist, fin­de ich die Umsetzung sehr zwei­fel­haft. Dann lie­ber ein bestehen­des Plugin run­ter laden, öff­nen und abschau­en wie die­ses auf­ge­baut ist. Lernt man mehr von.

Schreibe einen Kommentar zu Marcel Weber Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.