Framework-Erweiterungen

Deaktivieren von Buttons

Auch dazu kann auf grundlegende Funktionalitäten von jQuery zurückgegriffen werden. Da jQuery als JavaScript Framework das Grundproblem der Interpretation von JavaScript bei verschiedenen Browsertypen bereits von Haus aus kennt, sind für solche Fälle geeignete Funktionen bereits vorhanden. jQuery kann dabei die folgenden Browserkennungen der verschiedenen Typen unterscheiden:

  • webkit
  • safari
  • opera
  • msie
  • mozilla
Da es sich bei Safari um einen Webkit-Browser handelt, musste dieser Browser im vorliegenden Beispiel nicht einzeln behandelt werden. Wird das Plugin aufgerufen, werden alle selektierten Elemente (Vorzugsweise Links oder Spans) mit Buttons ersetzt. Dies funktioniert in allen gängigen Browsern, wobei für alte Browser eine Fallback-Variante existiert.

Deaktivieren von Buttons

Kommen wir nun zu der Methode zum Deaktiveren von Buttons. Der umgeleitete Aufruf bei der Übergabe des Strings disable an graphButton landet im Object methods in einer Funktion, deren Inhalt sich wie folgt darstellt:

disable : function() {
return $(this).each(function() {
$(this).css({
'cursor':'default',
'opacity':'.3',
'filter:':'alpha(opacity=70);'
});
});
}

Dabei wird der Button nicht im eigentlichen Sinne deaktiviert, sondern der CSS-Style wird so verändert, dass er dem Look and Feel eines deaktivierten Buttons entspricht.Der Mauszeiger bleibt der standardmäßige Pfeil bei Darüberfahren und der Button wird leicht durchsichtig. Die funktionelle Deaktivierung muss im eigentlichen JavaScript auf der Webseite geschehen und kann durch die optische Deaktivierung hier nur unterstützt werden.

Die Nutzung des Plugins

Um das Plugin nun zu nutzen, müssen vorerst im <head>-Bereich der Webseite in richtiger Reihenfolge die CSS-Datei der Buttons, danach das jQuery Kernframework und anschließend das gerade erstellte jQuery Plugin eingebunden werden.

<link rel="stylesheet" type="text/
css" media="all" href="css/
graphButtons.css" /><script type="text/javascript"
src="scripts/jquery-1.4.2.js"></
script><script type="text/javascript"
src="scripts/jQuery.graphButtons.
js"></script>

Im Quelltext der Seite müssen anschließend die Elemente identifiziert werden, die zu Buttons werden sollen. Im Beispiel handelt es sich dabei um Link- und Span-Elemente, welche die Klasse graphButton besitzen.

<a href="#" class="graphButton
disableOption"> Absenden </a><br /><a href="#" class="graphButton">
Absenden 2 </a><br /><span class="graphButton">
Absenden 3 </span>

Durch diesen ebenfalls im <head>- Bereich der Seite befindlichen Quellcode wird nun aus diesen Elementen jeweils ein Button.

<script type="text/javascript"><!--
$(function() {
$(".graphButton").graphButton({
background: "#CCC",
colortop: "#888888",
colorbottom: "#CCCCCC",
color: "#FFF"
});
$(".disableOption").click
(function (){
$(".disableOption").
graphButton("disable");
});
});
--></script>

Dabei wird dem Button mit der zusätzlichen Klasse disableOption eine onClick- Funktion zugeordnet. Diese ruft dann auf ihm die disable-Methode des Plugins auf. Das bedeutet: Klickt der Nutzer auf diesen Button wird eben dieser deaktiviert.Da es in jQuery auch möglich ist, die DOMElemente nach Typ zu selektieren, können auch automatisch alle Links auf einer Webseite in Buttons verwandelt werden. Dazu sieht der Aufruf der Funktion graphButton wie folgt aus:

$(function() {
$("a").graphButton({
background: "#CCC",
colortop: "#888888",
colorbottom: "#CCCCCC",
color: "#FFF"
});
});

Schnelle Erfolge

image.jpg

© Internet Magazin

Plugins für jQuery einfach selbst gemacht

Die Entwicklung von jQuery Plugins ist ein komplexer Prozess, der einiges Wissen voraussetzt und gleichzeitig von vielen Grundstrukturen lebt. In diesem Artikel sollten Ihnen vor allem diese Grundstrukturen nahegebracht werden, da auf dieser Basis durch Learning by Doing schnell Erfolge verbucht werden können.Durch die sequentielle Erläuterung der Quellcodeteile in diesem Artikel kann das Thema jQuery Plugins schnell verwirrend wirken - das ist es jedoch nicht. Nehmen Sie sich noch einige Minuten Zeit und konsultieren Sie den gesamten Quellcode des Beispiels in den Listings auf www.internet-magazin.de , um das Gesamtbild des Beispiels zu verstehen. In diesem Zusammenhang stellt sich die Programmierung eines jQuery Plugins in ein anderes, weitaus einfacheres Licht.Sobald Sie Ihr erstes jQuery Plugin geschrieben haben, freut sich eine große Gemeinschaft auf www.jquery.com auf Ihren Beitrag.

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