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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".