Crossbrowserfähige Buttons
- Plugins für jQuery einfach selbst gemacht
- Funktionalität
- Crossbrowserfähige Buttons
- Deaktivieren von 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 Butt...
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({...});
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 + '))'
});
}
