Framework-Erweiterungen

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:

var conf = {
background:
"#CCCCCC",
colortop: "#334670",
colorbottom:
"#5c74a9",
color: "#FFFFFF"
};

image.jpg

© Internet Magazin

Ausgangssituation: Links und Span Elemente zur Navigation.

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);

image.jpg

© Internet Magazin

Das Plugin im Beispiel ersetzt die selektierten Elemente durch ansprechende Buttons.

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');
});

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017