Framework-Erweiterungen

Crossbrowserfähige Buttons

In diesem Auszug wird nach einem Klick auf das Element mit der ID disableTheButton die Methode disable des Plugins graphButton aufgerufen. Diese Anfrage wird im Inneren des Plugins im unteren Zweig weitergegeben und innerhalb der Definition des Objektes methods behandelt.

Crossbrowserfähige Buttons

Sowohl die Hauptfunktionalität als auch die weiteren Methoden werden durch folgenden Code umgeben:

return this.each(function() {
...
});

Dieser Code ist der Tatsache geschuldet, dass bei der Selektion mithilfe von jQuery die Anzahl der Elemente in der Rückgabemenge beliebig hoch sein kann. So ist es beispielweise in jQuery möglich, genau ein Element zu selektieren:

// Im Document Object Model
kann sich nur genau ein
Element mit der ID
"myOneAndOnly" befinden
$("#myOneAndOnly").
graphButton({...});

Oder aber eine Reihe von Elementen auszuwählen:

// im Document Object Model
koennen sich beliebig viele
Elemente mit der Klasse
"myClassofElements" befinden
$(".myClassofElements").
graphButton({...});

image.jpg

© Internet Magazin

Darüber hinaus gibt es die Möglichkeit, Buttons über eine Funktion zu deaktivieren (hier im Falle des ersten Buttons).

Um diesem Umstand gerecht zu werden, wird immer davon ausgegangen, dass es sich um mehrere Elemente in der Selektion handeln kann. Deshalb wird der Ausdruck this.each verwendet. Dieser führt die anschließende Funktion für jedes übergebene Element aus. Gleichermaßen wird hier ein weiterer wichtiger Aspekt bei der Programmierung eines jQuery Plugins deutlich: Mit dem Schlüsselwort this ist der Zugriff auf das übergebene Element möglich.Die Hauptfunktionalität des vorliegenden Plugins ist recht einfach, da es sich fast ausschließlich um die Manipulation von CSS-Eigenschaften und die Zuweisung von CSS-Klassen handelt.

// Standardklasse hinzufuegen
$(this).addClass('gButton');

Dabei wird als Erstes den betroffenen Elementen die Klasse gButton hinzugefügt. Diese CSS-Klasse beinhaltet die grundlegenden Style-Eigenschaften. Dazu zählen hier der verwendete Mauszeiger (cursor: pointer;), die Ausrichtung (display: inlineblock;) sowie verschiedene Einstellungen zu Schriften, Farben und Abständen.Diese Klasse hat über die Standarddefinition hinaus auch einen definierten :hover. Dabei wurde im Beispiel nur die text-decoration mit dem Wert underline belegt. Um den Button beim Klicken etwas aktiver zu gestalten, wurde weiterhin :action mit folgenden Werten definiert:

.gButton:active {
position: relative;
top: 1px;
}

Dadurch kommt es beim Klick auf den Button zu einer leichten Verschiebung nach unten und es entsteht ein Effekt, der ein tatsächliches Nach-unten-Drücken des Buttons vermuten lässt. Nachdem alle Elemente diese Klasse zugewiesen bekommen haben, erfolgt die erste Manipulation des CSS auf Grundlage der übergebenen Werte. Hier wird aus dem Parameterobjekt die Schriftfarbe und die Hintergrundfarbe für den Fallback verwendet und zugewiesen. Der Zugriff erfolgt durch [Objektname].[Parameter].

//festgelegte Eigenschaften in den
Stil der Klassen uebernehmen
$(this).css({
'color':conf.color,
'background':conf.background
});

Nachdem auch dieser Schritt erledigt ist, kommt der schwierigere Teil der Umsetzung: Je nach Browsertyp muss der Farbverlauf für den Button umgesetzt werden. Dazu wird eine Browserweiche verwendet und die entsprechenden CSS-Eigenschaften für jeden Browsertyp separat festgelegt:

//Browsererkennung und je nach
Browser Angabe des Buttonssytles
if($.browser.mozilla){
// CSS-Anpassung fuer Mozilla (z.B.
Firefox)
$(this).css({
'background':'-moz-linear-gradient
(top, ' + conf.colortop + ', ' +
conf.colorbottom + ')'
});
}
if($.browser.msie){
// CSS-Anpassung fuer Internet
Explorer
$(this).css({
'filter':'progid:DXImageTransform.
Microsoft.gradient(startColorstr=\''
+ conf.colortop + '\', endColor
str=\'' + conf.colorbottom + '\')'
});
}
if($.browser.opera){
// CSS-Anpassung fuer Opera
$(this).css({
'filter':'progid:DXImageTransform.
Microsoft.gradient(startColorstr=\''
+ conf.colortop + '\',
endColorstr=\'' + conf.colorbottom +
'\')'
});
}
if($.browser.webkit){
// CSS-Anpassung fuer Webkit-Browser
$(this).css({
'background':'-webkit-gradient
(linear, left top, left bottom,
from(' + conf.colortop + '), to(' +
conf.colorbottom + '))'
});
}

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.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…