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

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