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({...});

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.