Funktionalität
In der zentralen Funktion graphButton werden als Erstes alle Parameter festgelegt, die von dem Plugin erwartet werden, beziehungsweise beim Aufruf festgelegt werden können. Dazu wird ein Objekt definiert, welches die Parameter als Attribute erfasst:...
In der zentralen Funktion graphButton werden als Erstes alle Parameter festgelegt, die von dem Plugin erwartet werden, beziehungsweise beim Aufruf festgelegt werden können. Dazu wird ein Objekt definiert, welches die Parameter als Attribute erfasst:
var conf = {
background:
"#CCCCCC",
colortop: "#334670",
colorbottom:
"#5c74a9",
color: "#FFFFFF"
};
Hier können die gewünschten Farben für den Farbverlauf des Buttons gewählt werden und als Fallback-Variante (für Browser, die keinen Farbverlauf darstellen können) eine Hintergrundfarbe. Darüber hinaus kann auch die Schriftfarbe des Buttons angepasst werden. An dieser Stelle sind natürlich Erweiterungen um den Schrifttyp, die Schriftgröße und vielerlei anderer Einstellungen denkbar, welche hier aus Gründen der Komplexitätsbegrenzung jedoch ausgespart werden.Um zu prüfen, ob beim Aufruf der jQuery- Plugin-Funktion tatsächlich Werte übergeben wurden und in dem Falle einer Parameterübergabe die Daten für die Ausführung zu übernehmen, kann folgendes Konstrukt verwendet werden:
if (settings) $.extend(conf,
settings);
Dieses prüft, ob settings verwendet wurde, und überschreibt in diesem Fall die Einträge in conf mit denen aus settings. Dazu wird die jQuery-Funktion extend genutzt. Die Funktion extend() befindet sich im jQuery Core. Übergibt man dieser Funktion zwei oder mehr Parameter, werden die Attribute aller übergebenen Objekte Teil des Zielobjektes (erster Übergabeparameter). Gleichzeitig erfolgt durch den Aufruf von extend() die Rückgabe des fertigen Zielobjektes.Ein einfaches Beispiel soll die Funktionsweise verdeutlichen:
var obj1 = {
autos: 5,
jeeps: 25,
pickups: 3
};
var obj2 = {
jeeps: 100,
limosinen: 5
};
var obj3 = $.extend(obj1, obj2);Das sich ergebende Objekt hat somit vier Attribute mit folgenden Werten nach dem Zusammenführen:
var obj3 = {
autos: 5,
jeeps: 100,
pickups: 3,
limosinen: 5
}Auf dieselbe Weise werden auch Funktionen, die später aufgerufen werden können, definiert:
var methods = {
disable : function() {
...
}
};Hier handelt es sich um die Funktion disable, die nach der Anwendung auf einen Button diesen ausgrauen soll, sodass dieser deaktiviert ist. Die Funktionalitäten, die in dieser Funktion dazu benötigt werden, werden zu einem späteren Zeitpunkt beschrieben.
Funktionalität
In der Grundstruktur eines jQuery Plugins kann weiterhin unterschieden werden, ob beim Aufruf ein Objekt mit den gewünschten Parametern übergeben wurde, oder ein String mit einem Methodennamen (hier zum Beispiel disable). Dies kann wie folgt umgesetzt werden:
if(typeof settings ==
"object"){
...
// Hier steht der
generelle Code bei
Ausführung des Plugins
...
} else if(typeof settings ==
"string"){
// Hier wird je nach String die
Methode aus dem Objekt methods
ausgerufen und das aufrufende
Element übergeben.
return methods[settings].apply
($(this));
}Im Beispiel des Artikels befindet sich die Grundfunktionalität (Buttons werden erzeugt) folglich im oberen Teil der Verzweigung, während im unteren Teil beim Aufruf der Methode mit dem Namen disable die Anfrage weitergereicht wird. Um dies zu verdeutlichen, seien hier zwei exemplarische Aufrufe des jQuery Plugins dargestellt:
$("#meinButton").graph
Button({
background: "#CCC",
colortop: "#0000FF",
colorbottom: "#00FF00",
color: "#FFF"
});Bei diesem Aufruf wird der Hauptteil (oberer Zweig) verwendet, um den Button zu generieren.
$("#disableTheButton").
click(function (){
$(".graphButton").
graphButton('disable');
});
