Navigieren / suchen

jQuery Plugin selber erstellen

Ich habe in letzter Zeit viel mit jQuery rum gebastelt und ich finde es einfach nur geil. Man kann extrem viel Code und nerven sparen. Abfragen mit .ajax, einfacher geht es nicht mehr.
Ich habe mir letztens das jQuery Kochbuch von O’Reilly gekauft. Das kann ich wirklich empfehlen.

So nun genug geschwärmt, kommen wir zum eigentlichen Thema. Wenn man mit jQuery ein wenig gearbeitet hat, kennt man sicher das einte oder andere Plugin dafür. Ganz einfach $(‚#myDiv‘).gallery(…); aufrufen und schon hat man seine ganz geile Gallery.
So jetzt will ich aber mein eigenes kleines Plugin schreiben, vielleicht um danach sogar als Open-Source frei zu geben. Das könnte ja dann so aussehen:

$('#myDiv').nischi(...);

Das ganze Plugin wird in eine Datei ausgelagert die in etwa jquery.nischi-1.0.0.js heisst. Damit wir im Plugin selbst auch den Kürzel $ verwenden könnt müssen wir folgendes Strukt aufsetzen.

(function($) {
  // Hier kommt das Plugin rein.
})(jQuery);

Jetzt müssen wir dem jQuery nur noch sagen, dass nischi eine Funktion mit irgendwelchen Parametern ist. Das geht ganz einfach so:

$.fn.nischi = function (options){
  // Was passiert alles wenn $('#myDiv').nischi(...); aufgerufen wird.
}

Ich habe in diesem Beispiel einen Parameter mit dem Namen options. Dieser sollte ein JSON sein. Dazu weiter unten.

Das wir den Plugin-Code auf alle Elemente im Selector anwenden können müssen wir folgende Schlaufe programmieren.

return this.each(function() {			
  // Hier der Code für jedes Element im Selector
});

So nun haben wir ein voll funktionsfähiges jQuery Plugin. Allerdings gibt es da noch ein paar kleine Tricks. Einer davon will ich euch unbedingt zeigen. Wir übergeben ja oben den Parameter options welcher ein JSON-Element darstellt. Meistens sind ja nicht alle Parameter Pflicht. Darum brauchen wir zwingend Defaultwerte. In meinem Beispiel mache ich ein JSON mit den Defaultwerten und adaptiere diese zu den options dazu. Somit habe ich ein neues JSON-Element welches die übergebenen Werte drin hat und alle fehlenden mit den Defaultwerten versehe. Als Beispiel hat es auch gleich ein eigenen Event dabei.

/*
if(typeof opts.nameOfEvent == "function") {
  o.nameOfEvent(param1, param2);
}
*/

// Standard-Optionen für das Plugin
$.fn.nischi.defaults = {
  width: 150,
  height: 300
  // nameOfEvent: function(param1, param2) {},
}

// options ist der Parameter des Plugins
var opts = $.extend($.fn.nischi.defaults, options); 

Ich bin immer froh um ein Code welchen ich grad kopieren kann, damit ich auch weis wie ich die oben genannten Code-Schnipsel zusammensetzen muss. Darum hier den zusammengesetzten Code.

// Damit im Plugin auch das kürzel $ verwendet werden kann
(function($) {
  $.fn.nischi = function (options){
    // Optionen welche übergeben wurden in eine Variable speichern und
    // mit den Standardwerten verbinden
    var opts = $.extend($.fn.nischi.defaults, options);

    // Für hedes Element die Boxen erstellen
    return this.each(function() {
      // Code was er mit dem Element machen soll
      // $(this) ist das Element
    });
  };

  /*
  if(typeof opts.nameOfEvent == "function") {
   o.nameOfEvent(param1, param2);
  }
  */

  // Standard-Optionen für das Plugin
  $.fn.nischi.defaults = {
    width: 150,
    height: 300
    // nameOfEvent: function(param1, param2) {},
  }
})(jQuery);

So nun viel spass mit eurem eigenen jQuery Plugin. Schreibt doch mal rein was ihr so gemacht habt, würde mich interessieren. Mein Plugin werde ich sicher auch hier veröffentlichen, das braucht aber noch ein Weilchen :)

Kommentare

Marco Betschart

Cool! Super Anleitung – wusste gar nicht, dass das so einfach geht. Nimmt mich jetzt schon wunder für was du ein Plugin schreibst?! Gibt ja schon fast alles ;)

Nischi

ist mehr die idee gewesen von reinhard. multiselect box mit ajax-anbindung und update/delete/insert funkionalität.

Marie-Luise

Auf meinem Handy sieht dein Blog irgendwie komisch aus.

Nischi

was hast du den für ein Handy?

Reinhard Jung

Man kann auch keine ungültigen html-Tags in Kommentare angeben…

Nischi

He Reini, lässt du wieder mal dein Charme spielen ;)
Hmm solange es mir die Website nicht zerschiesst :D

Moritz

<?php

Hinterlasse einen Kommentar

Name*

E-Mail* (wird nicht veröffentlicht)

Webseite