417
Kapitel 23
Effekte und Plug-Ins von jQuery
In diesem Kapitel:
Kernfeatures zum Erweitern der Nutzbarkeit 418
jQuery UI 423
Übungen 429
418
Kapitel 23: Effekte und Plug-Ins von jQuery
Nachdem Sie dieses Kapitel gelesen haben, sind Sie in der Lage:
native jQuery-Effekte zu verstehen und zu verwenden
jQuery UI zu verstehen
jQuery UI zu verwenden
Kernfeatures zum Erweitern der Nutzbarkeit
Effekte und Erweiterungen der Nutzbarkeit wie zum Beispiel Ziehen und Ablegen (Drag & Drop), Ein- und
Ausblenden von Elementen sowie gleitende Elemente sind mithilfe von jQuery leicht zu implementieren.
Und wenn Ihnen diese Features nicht genügen, um das Produkt zu mögen, ist jQuery erweiterbar und kann
auf eine gesunde Community verweisen, die es unterstützt.
Zu den Features, die die jQuery-Community beiträgt, gehören Plug-Ins. Die jQuery-Plug-Ins bieten zusätz-
liche Funktionalität, die im Kernpaket von jQuery nicht vorhanden ist. Weitere Informationen zu Plug-Ins
und eine Liste der momentan verfügbaren Plug-Ins finden Sie auf der jQuery-Website unter http://
plugins.jquery.com/.
Dieses Kapitel bietet einen Überblick über einige Effekte, die im jQuery-Kernprodukt und in jQuery UI
realisiert sind.
Native Effekte
Wie bereits in der Einführung zu diesem Kapitel erwähnt, umfasst jQuery mehrere Funktionen, die die
Nutzbarkeit einer Webanwendung erweitern können, beispielsweise das Ein- und Ausblenden von Elemen-
ten (abrupt oder allmählich). Dieser Abschnitt beschäftigt sich mit einigen nativen Effekten, die in jQuery
integriert sind. Beachten Sie, dass während der Manuskripterstellung zu diesem Buch sowohl jQuery als
auch jQuery UI für das Arbeiten mit Windows Internet Explorer 9 aktualisiert wurden, sodass einige der
Beispiele in diesem Kapitel möglicherweise mit der letzten Betaversion von Internet Explorer 9 nicht funk-
tionieren. Allerdings ist damit zu rechnen, dass jQuery und jQuery UI bereits auf dem neuesten Stand für
Internet Explorer 9 sind, wenn Sie dieses Kapitel lesen.
Show, Hide und Toggle
Die Funktionen .show() und .hide() blenden Elemente auf einer Seite ein bzw. aus. Diese Funktionen setzen
die CSS (Cascading Style Sheets)-Eigenschaft display. Um ein Element auszublenden, setzen Sie die Eigen-
schaft display auf none. Dabei wird das Element nicht aus dem DOM entfernt und es lässt sich jederzeit
wieder mit der Funktion .show() anzeigen. Listing 23.1 zeigt ein Beispiel für die Funktion .hide().
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hide</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<style type="text/css">
.removeBtn {
color: #0000CC;
Kernfeatures zum Erweitern der Nutzbarkeit
419
}
</style>
</head>
<body>
<ul>
<li id="option1">Option 1 <span class="removeBtn" id="remove1">(x)</span></li>
<li id="option2">Option 2 <span class="removeBtn" id="remove2">(x)</span></li>
<li id="option3">Option 3 <span class="removeBtn" id="remove3">(x)</span></li>
<li id="option4">Option 4 <span class="removeBtn" id="remove4">(x)</span></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$('#option1').click(function() {
$('#option1').hide();
});
$('#option2').click(function() {
$('#option2').hide();
});
$('#option3').click(function() {
$('#option3').hide();
});
$('#option4').click(function() {
$('#option4').hide();
});
});
</script>
</body>
</html>
Listing 23.1 Ein Element ausblenden
Das Beispiel in Listing 23.1 ist nicht gerade optimal konzipiert, da der Behandlungscode für jedes Element
einzeln hinzugefügt werden muss. (In einem realen Produktionsprogramm werden Sie einen derartigen Pro-
grammierstil kaum erwarten – zur Veranschaulichung ist er aber durchaus angebracht.) Eine bessere Lösung
besteht darin, die Optionen mithilfe ihrer Funktionen zu behandeln. Listing 23.2 zeigt eine verbesserte Variante,
um die gleiche Funktionalität mithilfe von jQuery und ohne die fest kodierten Optionen zu erreichen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hide</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<style type="text/css">
.removeBtn {
color: #0000CC;
}
</style>
</head>
<body>
<ul>
<li id="option1">Option 1 <span class="removeBtn" id="remove1">(x)</span></li>
<li id="option2">Option 2 <span class="removeBtn" id="remove2">(x)</span></li>
<li id="option3">Option 3 <span class="removeBtn" id="remove3">(x)</span></li>
<li id="option4">Option 4 <span class="removeBtn" id="remove4">(x)</span></li>
</ul>

Get JavaScript - Schritt für Schritt now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.