jQuery: Funktionen und Plugins

JQuery stellt eine Vielzahl von Mehoden bereit, mit denen geplante Funktionsabläufe kombiniert und ausgeführt werden können. Soll ein Anweisungsblock mehrfach ausgeführt werden, lohnt sich die Einrichtung einer individuellen Funktion - dadurch wird der Code schlank gehalten und die Fehlerquellen reduzieren sich.

Funktionen werden in jQuery mit dem Schlüssewort fn an das jQuery-Objekt gehängt und mit einem Funktionsnamen verbunden - diese Syntax gilt ebenso für die Erstellung eines jQuery Plugins. Fn steht dabei für eine jQuery Methode, um die das jQuery-Objekt erweitert wird. Alle Anweisungen, die innerhalb der Funktion ausgeführt werden sollen, werden anschliessend in dem Funktionsblock innerhalb der geschweiften Klammern aufgelistet.

$.fn.meinFunktionsname = function()
{ Anweisungen;
}

1. Eine Funktion schreiben

Bevor eine Funktion geschrieben wird, muss sie in allen Details geplant werden. Erst nach der Planung kann jede erforderliche Aktion in Code "übersetzt" werden. Im Beispiel soll eine Funktion geschrieben werden, mit der die Hintergrundfarbe von Elementen verändert werden kann. Der Funktionsplan sieht wie folgt aus:

  1. Startvariante: Hintergrundfarbe aller Elemente grau
  2. bei Mausklick auf graues Element: Farbwechsel zu rot, animierte Größenänderung
  3. bei Mausklick auf rotes Element: animierte Größenänderung zurück zu Ausgangsgröße, Farbwechsel zurück zu grau

Im HTML-Dokument werden zuerst 6 Elemente angelegt und mit einer Stylesheet-Anweisung formatiert.

<div>Box1</div>
<div>Box2</div>
<div>Box3</div>
<div>Box4</div>
<div>Box5</div>
<div>Box6</div>

div {width:200px; height:200px; float:left;margin:10px;padding:10px;background-color:#DDDDDD;}

Nun geht es mit dem Aufbau der Funktion weiter. Im Beispiel wird sie bgSize genannt und es zunächst einmal ein Gerüst für den geplanten Anweisungsblock erstellt:

$.fn.bgSize = function(){
};

Es folgt die Anweisung, durch die eine andere Hintergrundfarbe übertragen werden soll (2). Da zwischen den Hintergrundfarben per Mausklick hin- und hergesprungen werden soll, bietet sich die Methode toggleClass an. Mit dieser Methode kann eine definierte Klasse an ein Element gehängt werden - es wird also der Aufruf der Methode und eine weitere Stylesheet-Anweisung benötigt. Die Methode wird in der Funktion mit dem relativen Selektor this verbunden, da der Funktionsaufruf später durch ein Klickevent ausgelöst wird und das geklickte Element damit zum Zeitpunkt der Funktionsausführung fest steht.

$.fn.bgSize = function(){
$( this ).toggleClass( "active" );
};

.active {background-color:#ff0000;}

Die Größenänderung muss zuzsätzlich als eigenständige Methode in den Funktionsablauf aufgenommen werden und folgt unmittelbar nach der Zuweisung der Klasse .active. Die Reihenfolge ist wichtig, da sich die Größenänderung nur auf die bereits rot eingefärbten Elemente auswirken soll und dazu dann der Selektor .active eingesetzt werden kann.

$.fn.bgSize = function(){
$( this ).toggleClass( "active" );
$(".active").animate({height:"300px",width:"100%"});
};

Damit sich die Elemente wieder auf ihre Ausgangsgröße verkleinern, kann zu Beginn der Funktionsablaufs eine Art reset ausgeführt werden. Die einfache Methode liegt darin, alle Elemente, die bereits die Klasse .active erhalten haben, auf Normalmaß zu animieren. Das ist zwar etwas unruhig, erfüllt aber seinen Zweck.

$.fn.bgSize = function(){
$(".active").animate({height:"200px",width:"200px"});
$( this ).toggleClass( "active" );
$(".active").animate({height:"300px",width:"100%"});
};

Nachdem die Funktion komplett ist, muss sie nur noch auf die gewünschten Elemente angewendet werden. Im Beispiel werden die div-Elemente als Selektor gewählt und der Funktionsaufruf mit einem Klickevent verbunden.

$(document).ready(function(){
$("div").click(function(){
$(this).bgSize();
});
});

2. Eine Funktion als Plugin verwenden

Funktionen können in externe Dateien ausgelagert und - wie das Framework jQuery - in die ausführende HTML-Umgebung importiert werden. Grundsätzlich erweitern Plugins die jQuery-Objekte um selbst definierte Eigenschaften und Methoden. Sie werden immer dann eingesetzt, wenn ein Funktionsablauf mehrfach und mit individuellen Einstellungen angewendet werden soll, ohne dass der Code der Funktion dafür angepasst werden muss. Dazu werden Funktionen mit Parametern erweitert, die erst bei der Implementierung der Funktion mit Werten gefüllt werden. In dem Beispiel werden die Werte der Größe als Paramter übergeben - und zwar zweifach: einmal für die Anfangsgröße (A) und die Zielgröße (Z). Erst bei Funktionsaufruf werden die gewünschten Größen festgelegt.

$.fn.bgSize = function(breiteA, hoeheA, breiteZ, hoeheZ){
$(".active").animate({height:breiteA,width:hoeheA});
$( this ).toggleClass( "active" );
$(".active").animate({height:breiteZ,width:hoeheZ});
};

$(document).ready(function(){
$("div").click(function(){
$(this).bgSize("200px", "200px", "400px", "100%");
});
});

Durch die Verwendung von Parametern werden Funktionen flexibler und universell einsetzbar und können als Plugin auch anderen Entwicklern angeboten werden. Um ein Plugin zu erstellen wird die vorbereitete Funktion in einem separaten JS-Dokument gesichert. Das Dokument erweitert das jQuery-Objekt mit dem Namen der verwendeten Funktion und kann um eine Versionsnummer ergänzt werden:

jquery-bgSize-1.0.js

Die Implementierung des Plugins erfolgt durch Import der JS-Datei in die HTML-Datei. Der Aufruf der Funktion kann anschliessend wie gewohnt vorgenommen werden, erst bei Aufruf werden die erforderlichen Parameter eingefügt. Plugins werden normalerweise dokumentiert, so dass die Verwendung auch für Dritte nachvollziehbar ist.

<script type="text/javascript" src="/script/jquery-bgSize-1.0.js"></script>

$("div").click(function(){
$(this).bgSize("200px", "200px", "400px", "100%");
});

Print