Plugins für jQuery einfach selbst gemacht
jQuery ist das derzeit beliebteste JavaScript Framework und bietet vielerlei Funktionalitäten. Darüber hinaus besitzt jQuery durch eine große und aktive Community eine beinahe unüberschaubare Anzahl an Plugins. Dieser Artikel zeigt, wie Sie selbst eine solche Erweiterung des Frameworks programmieren können.
- Plugins für jQuery einfach selbst gemacht
- Funktionalität
- Crossbrowserfähige Buttons
- Deaktivieren von Buttons
Das Beispiel, welches im Rahmen dieses Artikels betrachtet werden soll, ist denkbar einfach: Es wird ein jQuery Plugin geschrieben, das es ermöglicht, aus beliebigen HTML-Elementen anhand deren CSS-Klasse einen grafischen Button zu generieren. Dieser Button soll darüber hinaus in allen gängigen B...
Das Beispiel, welches im Rahmen dieses Artikels betrachtet werden soll, ist denkbar einfach: Es wird ein jQuery Plugin geschrieben, das es ermöglicht, aus beliebigen HTML-Elementen anhand deren CSS-Klasse einen grafischen Button zu generieren. Dieser Button soll darüber hinaus in allen gängigen Browsern darstellbar sein und ausschließlich mit CSS definiert werden. Außerdem soll die Möglichkeit existieren, den Button über eine weitere Methode des Plugins zu deaktivieren.
Das grundlegende JavaScript Pattern
Egal, auf welches jQuery Plugin ein neugieriger Blick geworfen wird, ein zentrales Element ist immer gleich: Das gesamte Plugin wird von einem anfangs etwas ungewöhnlich wirkenden Konstrukt umklammert.
(function($){
...
})(jQuery);Dabei handelt es sich um ein JavaScript Pattern, das jedoch häufig unbekannt ist. jQuery selbst nutzt dieses Pattern auch im Kernframework und kann erst auf diese Weise die vollständige Funktionalität bereitstellen.Es handelt sich dabei um eine Definition einer JavaScript-Funktion. Ohne die Übergabe von Parametern gleicht das Konstrukt einer normalen JavaScript-Funktion bis auf die Tatsache, dass die gesamte Funktion nochmals umklammert wird.
(function($){ ... })Diese Darstellung ermöglicht eine sich selbst aufrufende JavaScript-Funktion. Am Ende dieses Konstrukts stehen die Parameter, die an die Funktion beim Selbstaufruf übergeben werden. Dabei wird hier das zentrale Element jQuery übergeben. Dieses ist dann innerhalb der Funktion über den Bezeichner $ verfügbar.Dies entspricht dann innerhalb der Plugin-Funktion der normalen Handhabung von jQuery und lässt den Zugriff innerhalb des Plugins auf die Standardfunktionen des jQuery Frameworks zu.
Exkurs
Live Updates von Elementen auf der Webseite wie bei Twitter: Mit diesem besonderen JavaScript Pattern lassen sich beispielsweise auch zeitlich gesteuerte, asynchrone Updates von Elementen einer Webseite bewerkstelligen. Dazu muss das Grundkonstrukt etwas erweitert werden:
(function updateLoop(){
$("#updateElement").load('getData.
php', function (){
setTimeout(updateLoop(), 1000);
});
})();Die Funktion updateLoop ruft sich selbst auf. Darin enthalten ist ein Update des Elementes #updateElement (Div-Element), welches mit den Inhalten gefüllt wird, die durch den Aufruf von getData.php zurückgeliefert werden.Sind die Daten vollständig geladen und das Update ausgeführt, wird durch die Funktion set-Timeout() mit 1000ms Verzögerung die Funktion updateLoop() erneut aufgerufen. Somit wird das Update der Anzeige stets wiederholt, und dem Nutzer wird die Aktualisierung durch das erneute manuelle Laden der Seite erspart.Ein einfaches Beispiel, an dem dieses Live Update schnell nachvollzogen werden kann, ist die Möglichkeit, eine sich selbst aktualisierende Uhrzeit auf einer Webseite anzeigen zu lassen. Dazu muss die getData.php folgenden Quellcode beinhalten:
<?php
echo date('l jS \of F Y h:i:s A');
?>Damit wird nun im Sekundentakt der Aufruf dieser PHP-Datei gestartet, die anschließend das Datum formatiert an das JavaScript zurückgibt. Dieser Rückgabewert wird durch jQuery in das dafür vorgesehene Div-Element updateElement geschrieben.
Der Grundaufbau
In der beschriebenen Funktion befindet sich dann der eigentliche Code des Plugins. Dieser wird durch die Funktion umgeben, die maßgeblich für den Namen und Aufruf des Plugins ist. Das Plugin im Beispiel heißt graphButton und wird in folgender Form definiert:
(function($){
$.fn.graphButton = function(settings)
{
...
};
})(jQuery);Dies geschieht in einer eigenen JavaScript- Datei, die für offizielle Plugins nach jQuery- Vorgaben folgende Namenskonvention erfüllen sollte: jQuery.[PluginName ].js.
