JQuery Kochbuch (German Edition)

Effekte anzuzeigen, und den CSS-Code um eine neue Klasse ergänzt.
    CSS
.big {
font-size: 400%;
width: 500px;
height: 500px;
line-height: 100%;
}
    jQuery
$(document).ready(function () {
$('#animate').click(function () {
    $('.box').toggleClass('big', 2000);
});

$('#effect').click(function () {
    $('.box').effect('explode', null, 2000);
});
});
    Diskussion
    Die Effekt-Bibliothek jQuery UI ändert auch die Verhaltensweise von
addClass
,
removeClass
und
toggleClass
. Vor allem können Sie jetzt als zweiten Parameter eine Dauer angeben, womit Sie eine Animation vom aktuellen Zustand zur neuen Klasse erhalten.
    Das erste Beispiel fügt also die Klasse
big
hinzu und lässt die Animation zwei Sekunden laufen. Alle CSS-Eigenschaften der Klasse
big
werden für das Element
div.box
animiert. Da die Methode
toggleClass
ebenfalls durch jQuery UI verändert wurde, können wir auch zwischen dem alten und neuen Zustand hin und her wechseln.
    Dann nutzen wir die Methode
effect()
, diezur jQuery UI-Bibliothek gehört. Diese Methode stellt eine ganze Reihe von Möglichkeiten bereit, um Elemente anzuzeigen oder zu verbergen.
    ----
    Note
    Der Methode
effect()
muss das Options-Objekt als zweiter Parameter übergeben werden. Das kann null oder auch ein leeres Objekt sein, aber um eine Dauer angeben zu können, muss es bereitgestellt werden.
    ----
    Mit dem String
explode
wird
div.box
in neun Bereiche unterteilt, die wie in Figure 7-2 vom Bildschirm verschwinden.
    ----
    Warning
    Zum Zeitpunkt der Entstehung dieses Buches haben ein oder zwei Effekte unter Safari 4 Nebenwirkungen. Aber wie von Yahoo! unter http://developer.yahoo.com/yui/articles/gbs/ beschrieben, funktionieren sie in allen anderen wichtigen Browsern.
    ----
    Um sich all die verschiedenen Effekte anzuschauen, können Sie http://jquery-cookbook.com/go/jqueryui-effects besuchen und mit den interaktiven Demos herumspielen.

Chapter 8. Events
    Ariel Flesler

Einführung
    Events (oder Ereignisse) sind die wichtigste Kommunikationsform zwischen einem Anwender und einer Website oder einer Webanwendung. Ein Großteil des JavaScript/jQuery-Codings läuft als Reaktion auf eine Reihe von Benutzer- und Browser-Events ab.
    Mit Benutzer-Events meine ich vor allem Interaktionen über die Tastatur und Maus, wie zum Beispiel
click
,
mousedown
,
keypress
und so weiter. Browser-Events sind vor allem DOM-Events wie
document.ready
,
window.onload
und viele weitere, die mit DOM-Elementen zusammenhängen.
    Wenn wir Ajax-Anwendungen schreiben, haben wir auch noch jQuery-eigene Ajax-Events , die während der Lebenszeit der Ajax-Anforderung auftreten können –
ajaxSend
,
ajaxComplete
,
ajaxError
und noch ein paar mehr.
    Die jQuery-API ist sehr konsistent, insbesondere bei den Events. Einen Handler verbindet man mit einem beliebigen Event immer über die gleiche Code-Struktur:
jQuery(
listener
).bind(
'eventName'
,
handlerFunction
);
    Diese Syntax ist auch für eine vierte Kategorie von Events gültig, die ich noch gar nicht erwähnt habe. Das Event-System von jQuery kann für die ereignisorientierte Programmierung [ 1 ] genutzt werden, in der Sie Ihre eigenen Events definieren können, die sich wie die vorgegebenen Events binden und auslösen lassen.
    jQuery bietet für die am häufigsten genutzten Browser- und Ajax-Events eine Kurzform an. Ein Aufruf sähe dann so aus:
jQuery(
listener
). eventName (
handlerFunction
);
    Bei der Verwendung von
bind()
ist
eventName
ein String in einfachen oder doppelten Anführungszeichen. Bei dieser Kurzform nutzen Sie einfach den Namen des Events als Methodenname von jQuery.
    Hier ein Beispiel für das Binden eines Click-Handlers in Lang- und Kurzform:
// bind() nutzen
jQuery('
div'
).
bind('click',
function(e){
...}
);
// Kurzform nutzen
jQuery('
div'
).
click
(function(e){
...}
);
    In diesem Kapitel werde ich die Kurzform nutzen, wenn es sie gibt, weil sie eben kürzer und meiner Meinung nach einfacher lesbar sind. Beide funktionieren gleich und es gibt keinen Vorteil der einen Form gegenüber der anderen – abgesehen von Klarheit und Kürze, was aber natürlich Geschmackssache ist.
    Ich gehe davon aus, dass Sie schon Chapter 1 gelesen haben, in dem das Event
document.ready
bereits genauer beschrieben wurde ( Ausführen von jQuery/JavaScript-Code nach dem Laden des DOM, aber noch vor dem vollständigen Laden der Seite ). Sind Sie sich in Bezug auf die Anwendung nicht ganz sicher, dann schauen Sie sich den Abschnitt nochmals an.
    Ich möchte auch noch