jQuery von Kopf bis Fuß (German Edition)
nicht zur Laufzeit der Animation angegeben werden muss.
$('#mein_element').slideUp();
$('#mein_element').queue(function() {
alert('Animation beendet.');
$(this).dequeue();
});
Das entspricht dem hier:
$('#mein_element').slideUp(function() {
alert('Animation beendet.');
});
Beachten Sie: Wenn Sie der Kette per
.queue
eine Funktion hinzufügen, muss die Funktion per
.dequeue
wieder entfernt werden, bevor die nächste Funktion der Kette ausgeführt wird.
In jQuery 1.4 wird die aufgerufene Funktion als erstes Argument an eine andere Funktion übergeben. Wird die zweite Funktion aufgerufen, wird automatisch
.dequeue
aufgerufen und die Kette läuft weiter. Das könnte man beispielsweise so benutzen:
$("#test").queue(function(next) {
// Irgendwas tun ...
next();
});
Die Standard-“Queue” in jQuery ist fx. Sie wird beispielsweise von der
.animate
-Methode und anderen Funktionen aufgerufen, die diese Methode standardmäßig benutzen. HINWEIS: Wenn Sie eine eigene Funktionskette verwenden, müssen Sie die Funktionen manuell per
.dequeue
entfernen. Sie werden nicht automatisch starten wie bei fx.
#6. Formulareingaben auf Gültigkeit überprüfen
Ein sehr wichtiges Thema, für das kein Platz mehr war, ist die Überprüfung von Formulareingaben auf der Seite von Client bzw. Browser mithilfe von jQuery. In den Kapitel 9 und Kapitel 10 haben Sie gesehen, wie die serverseitige Validierung mit PHP aussehen kann, bevor die Informationen in einer Datenbank gespeichert werden. Das ist ebenfalls sehr wichtig und mehr als nur empfehlenswert. Schon eine fehlerhafte
INSERT
-Anweisung kann mehr von Ihren Daten preisgeben, als Ihnen lieb ist.
Und damit zurück zur clientseitigen Validierung ...
Für die Validierung von Formulareingaben gibt es eine Vielzahl von Plugins. Einer unserer Favoriten ist das pasenderweise “validation” genannte Plugin, das Sie unter folgender Adresse finden können:
http://docs.jquery.com/Plugins/validation .
Mithilfe dieses Plugins können Sie für jedes Formularelement eine Reihe von Regeln definieren. Dadurch können Sie die Validierung an Ihre Bedürfnisse anpassen und ggf. unerwünschte Daten herausfiltern . Dazu gehören die Definition von Minimal- und Maximalwerten , die Überprüfung auf erforderliche Felder, Tests auf die Gültigkeit von E-Mail-Adressen und Vieles mehr. Hier einige Beispiele von der jQuery-Website:
Definiert zwei Elemente (name und email) als erforderlich (hier über die Abkürzung einer gemeinsamen Regel). Gleichzeitig wird die E-Mail-Adresse (über eine weitere Objekteigenschaft) auf Gültigkeit überprüft.
$(".selector").validate({
rules: {
// einfache Regel, konvertiert zu {required:true}
name: "required",
// zusammengefasste Regel
email: {
required: true,
email: true
}
}
});
Definiert ein Element als erforderlich (
required
) und legt eine minimale Länge von zwei Zeichen fest. Zudem wird für beide Regeln eine spezielle Nachricht definiert.
$("#myinput").rules("add", {
required: true,
minlength: 2,
messages: {
required: "Erforderliche Eingabe",
minlength: jQuery.format("Bitte geben Sie mindestens {0}
Zeichen ein.")
}
});
#7. jQuery UI-Effekte
Die jQuery UI-Effektbibliothek enthält einige zusätzliche Animationen , die in der regulären jQueryBibliothek nicht zur Verfügung stehen. Sie lassen sich in drei Funktionsgruppen unterteilen:
Farbanimationen
Farbanimationen erweitern die
animate
-Funktion um die Möglichkeit, Farben zu animieren. Das wird besonders häufig für den Wechsel von einer CSS-Klasse zu einer anderen genutzt. Die Farben der folgenden CSS-Eigenschaften können animiert werden:
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor
Klassenübergänge (transitions)
Klassenübergänge erweitern die Basis-API für Klassen um die Fähigkeit, zwei CSS-Klassen mit einem fließenden Übergang zu versehen. Dafür werden die folgenden jQuery-Methoden von jQuery UI so modifiziert, dass zusätzlich die unten stehenden Parameter übergeben werden können:
speed
,
easing
(optional) und
callback
.
addClass(name_der_css_klasse)
Fügt den ausgewählten Elementen die angegebene(n) Klasse(n) hinzu.
removeClass(name_der_css_klasse)
Entfernt die angegebene(n) Klasse(n) von den ausgewählten Elementen.
toggleClass(name_der_css_klasse)
Fügt einem oder mehreren Elementen die angegebene Klasse hinzu, wenn diese nicht vorhanden ist, bzw. entfernt sie, wenn sie bereits
Weitere Kostenlose Bücher