Deaktivieren von Buttons
- Plugins für jQuery einfach selbst gemacht
- Funktionalität
- Crossbrowserfähige Buttons
- 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. jQuer...
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
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
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.
