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

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 Ergebnissen…
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 einspannen.…
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…