HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 72

$('button').on('click', function(){
$('p#id').hide();
});
Wenn Sie auf den Button klicken, verschwindet der darunterliegende Textabsatz. Er
wird mit der jQuery-Methode .hide() versteckt. Doch wie können Sie den Absatz wie-
der einblenden? Ersetzen Sie die Methode einfach durch .toggle() :
$('p#id').toggle();
Wenn Sie auf die Schaltfläche klicken, verschwindet der Textabsatz. Wenn Sie den
Button erneut klicken, erscheint der Textabsatz wieder. Mit .toggle() können Sie
Inhalte also wie mit einem Kippschalter aus- und wieder einblenden.
Animieren mit jQuery
Um Ihr Dokument ansehnlicher zu machen und dem Benutzer auch transparenter
zu kommunizieren, was gerade passiert, bietet es sich an, das Aus- und Einblenden
durch eine Animation zu ergänzen.
Ersetzen sie die Methode .toggle() durch .slideToggle() :
$('p#id').slideToggle();
Ein Klick auf den Button lässt den Absatz nun herauf- und herunterrollen. Sie haben
soeben Ihre erste kleine Animation mit jQuery erzeugt. Im Abschnitt »Effekte« in
Abschnitt 2.5.3 dokumentieren wir noch weitere Animationsmöglichkeiten mit
jQuery. Dazu aber später mehr.
Daten vom Server nachladen
Ein besonders wichtiges Feature von jQuery ist das dynamische Nachladen von
Daten vom Server, auch bekannt als AJAX . Am Anfang dieses Kapitels haben Sie
bereits gelernt, wie ein XmlHttpRequest in reinem JavaScript aussieht. Nun möchten
wir Ihnen die jQuery-Variante erklären. Dazu benötigen wir in unserer Datei
index.html zunächst ein Element mit der id ergebnis :
<h1>Hallo Welt!</h1>
<ul id="ergebnis"></ul>
Legen Sie nun ein zweites HTML-Dokument mit dem Namen beispiel.html an, und
speichern Sie es im selben Verzeichnis wie index.html . Füllen Sie Folgendes in das
Dokument ein: