jQuery-Objekt mehrere Ergebnisse verarbeiten können muss, müssen Sie Ihre eigene Funktionalität in einen Aufruf der Funktion
each()
verpacken, damit Ihr Code auf alle Ergebnisse angewendet wird:
jQuery.fn.goShop = function() {
return this.each(function() {
jQuery('body').append('
Kaufe: ' + this.innerHTML + '
');
});
};
Der Zugriff auf dieses neue Plugin ist genauso einfach wie der »normale« Aufruf von jQuery:
jQuery('p').goShop();
Eine eigene jQuery-Funktion schreiben
Funktionen werden an das eigentliche jQuery-Objekt angehängt. Sie sind dazu gedacht, außerhalb einer jQuery-Selektion aufgerufen zu werden:
jQuery.checkout = function() {
jQuery('body').append('
Bezahlung erfolgreich
');
};
Diese neue Funktion kann ganz normal verwendet werden:
jQuery.checkout();
Diskussion
Das Anhängen neuer Methoden und Funktionen an das eigentliche jQuery-Objekt ist ein sehr leistungsfähiges Feature von jQuery. Ein Großteil der Core-Methoden ist in der Bibliothek genauso »eingebaut« worden. Durch das Bereitstellen dieser Möglichkeit auch für neue Funktionen können die Anwender Ihres Plugins neue Funktionalität einfach und prägnant hinzufügen, bestehende Funktionalität erweitern und den jQuery-Code so formen, dass er für sie am sinnvollsten einzusetzen ist. Diese Flexibilität ist ein Schlüsselfeature von jQuery und sie ermöglicht die Verwendung des Core und der Plugins durch ein größeres Publikum.
Die Wahl, jQuery über eine neue Methode oder über eine neue Funktion zu erweitern, muss vor allem über die Anforderungen der Entwickler getroffen werden. Im Allgemeinen ist es am besten, jQuery möglichst über eine Methode zu erweitern, da diese dann mit anderen Methoden verkettet werden und der Code die Vorteile der Selektor-Engine von jQuery nutzen kann.
Ihrem Plugin Optionen mitgeben
Problem
Ihr erstes Plugin ergänzt jQuery um eine Methode. Aber es gibt ein paar Optionen, die für die Anwender dieser Methode hilfreich wären, wenn man sie sauber veröffentlichen würde. Welche ist die beste Methode, um Optionen an eine eigene Methode zu übergeben?
Lösung
Optionen werden Ihrer Plugin-Methode am Besten über ein Options-Objekt übergeben. Mit einem einzelnen Options-Objekt als Parameter wird der Code sauberer, man kann leichter damit arbeiten, erwirbt sich aber gleichzeitig Flexibilität für die Zukunft.
Wenn Sie Optionen zulassen wollen, ist es angebracht, sinnvolle Standardwerte vorzugeben, die dann aber eben vom Anwender überschrieben werden können. Beides ermöglicht die Deklaration eines Standard-Options-Objekts, das Überschreiben der Standard-Optionen durch die vom Benutzer vorgegebenen und die jQuery-Methode
extend()
:
jQuery.fn.pulse = function(options) {
// Übergebene Optionen mit den Standardwerten verbinden
var opts = jQuery.extend({}, jQuery.fn.pulse.defaults, options);
return this.each(function() {
// Pulse!
for(var i = 0;i
jQuery(this).fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh);
}
// Zurücksetzen auf Anfang
jQuery(this).fadeTo(opts.speed,1);
});
};
// Standard-Optionen für das Pulse-Plugin
jQuery.fn.pulse.defaults = {
speed: "slow",
pulses: 2,
fadeLow: 0.2,
fadeHigh: 1
};
Durch die Angabe von Standardwerten für die Optionen haben die Entwickler, die Ihr Plugin verwenden, die Möglichkeit, beliebig viele Optionen selbst anzugeben, wenn sie Ihre Funktion aufrufen. Es ist wichtig, die Standardwerte erst zu definieren, nachdem Sie die Einstiegsmethode für Ihr Plugin definiert haben, da Sie ansonsten eine Fehlermeldung erhalten:
// Nur eine Option überschreiben
jQuery('p').pulse({pulses: 6});
// Alle Optionen überschreiben
jQuery('p').pulse({speed: "fast", pulses: 10, fadeLow: 0.3, fadeHigh: 0.8});
Und indem Sie Ihre Optionen als Objekt definieren, das als Kind-Element an Ihre Plugin-Funktion angefügt wird, lassen sich die Standard-Optionen auch einmalig in einem Projekt überschreiben. Ein Entwickler kann dann seine eigenen Standard-Optionen festlegen und damit den Umfang des Codes gering halten:
// Plugin-Code vor dieser Zeile
// Standard-Optionen für Pulse ändern
jQuery.fn.pulse.defaults = {
speed: "fast",
pulses: 4,
fadeLow: 0.2,
fadeHigh: 1
};
// Hier werden die neuen Standard-Optionen genutzt
jQuery('p').pulse();
Diskussion
Durch die Unterstützung von Optionen ermöglichen Sie Ihrem Plugin eine erstaunliche Flexibilität. Plugins, die viele Optionen bereitstellen, werden sehr