Tutorial: Ein jQuery Plugin erstellen

Der Sinn eines jQuery Plugins besteht darin, eine übersichtlich Collection von Elementen nach unseren Wünschen zu verarbeiten. Die Funktionsweise eines jQuery Plugins besteht darin, dass ein DOM-Element (oder auch eine Collection von DOM-Elementen) dem Plugin mit spezifischen festgelegten Parametern übergeben und im Plugin mit beliebigen Methoden modifiziert wird.

// by Ramon Hirsinger                        

//LOGIK DES PLUGINS
//$ wird als Alias für diese Funktion erzeugt. Diese Namespaces 
//dienen der Vorbeugung von Konflikten verschiedener Scripts ( jQuery , mootools ).

( function ( $ ) {        

    //Der Name dieser Funktion und ist eine Methode die das Objekt 
    //jQuery.fn. erweitert , "options" sind die zu Übergebenen Parameter.                            

    $.fn.myFunction = function ( options ) {    

        //Festlegen der Default Parameter. var settings ist ein assoziatives Array                
        var settings = $.extend( {                         

            myParam1 : "margin-top",
            myParam2 : 8,
            callback : null

        //Wenn options übergeben wurden, werden diese mit den settings-Array vermischt. 
        //dabei überschreibt das options-Array alle Positionen der settings die
        //angegeben wurden. Wenn Keine Optionen übergeben wurden 
        //bleiben alle Default-Werte gültig.

        } , options || {} );                            

        //LOGIK DES PLUGINS

        //Eine Methode wird im Body des Plugins aufgerufen. 
        //Der Funktionen werden Werte aus dem settings-Array übergeben

        setMarginByParams( this , settings.myParam2 );                

        //Wenn eine Callbackmethode übergeben wurde wird sie zum Schluss ausgeführt            

        typeof settings.callback == 'function' && settings.callback != null ? settings.callback.call() : settings.callback = null;

        //Ein Plugin soll immer sich selbst zurückliefern, damit u.a. die 
        //typische Verkettung mehrerer jQuery-Funktionen an einem Objekt gewährleitet wird.

        return this;                                

        //FUNKTIONEN

        function setMarginByParams ( object , a ) {

            object.css( settings.myParam1 , a + 'px');

        }

    }

// $ wird als Alias dem jQuery-Objekt zugewiesen

} ) ( jQuery );                                        						

//AUFRUF DES PLUGINS

$( document ).ready( function () {
          //Kann in diesem Fall ohne Übergabeparameter ausgeführt werden
          //Kann in diesem Fall mit einem Teil der Übergabeparameter ausgeführt werden
          //Kann mit allen Übergabeparameter ausgeführt werden
          //callback wird nach Abschluss der Funktionslogik ausgeführt, kann angegeben werden
          $('.myClass').myFunction({
                    myParam1 : 'margin-bottom',
                    myParam2 : 10,
                    callback : function() {
                              alert('Hallo sagt mein jQuery-Plugin');
                    }
          });
          //Der Elemente der Klasse '.myClass' wird der 'margin-bottom' 
          //auf 10px gesetzt
});

Schreibe einen Kommentar

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

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.