jQuery von Kopf bis Fuß (German Edition)
verändern.
Um an die gewünschten Dinge zu gelangen, verwenden Sie die Beziehungen der Elemente zueinander und die dazugehörigen Methoden wie parent und child.
Das Verketten von Methoden ist eine effiziente Möglichkeit, sich schnell im DOM zu bewegen.
Filter
Filtermethoden helfen dabei, die ausgewählten Elemente auf eine Untermenge zu beschränken:
first
equal
last
slice
filter
not
Kapitel 5. jQuery-Effekte und -Animationen: Vom Gleiten und Schreiten
Die Fähigkeit, etwas auf Ihren Webseiten passieren zu lassen, ist schön und gut, aber wenn Sie es nicht schaffen, das Ganze auch noch cool aussehen zu lassen, werden die Leute Ihre Site nicht benutzen wollen. Und genau da kommen jQuery-Effekte und -Animationen ins Spiel. In diesem Kapitel erfahren Sie, wie Sie Elemente mit fließenden Übergängen versehen können, bestimmte wichtige Teile von Elementen anzeigen oder verstecken können sowie Elemente vergrößern und verkleinern können – und das alles vor den Augen Ihrer Benutzer. Sie werden außerdem sehen, wie Sie Animationen in bestimmten zeitlichen Abständen ablaufen lassen können, um einer Seite ein sehr dynamisches Aussehen zu verleihen.
DoodleStuff braucht eine Web-Applikation
DoodleStuff versorgt die Kinder von Webville mit coolen Malutensilien. Vor einigen Jahren eröffnete DoodleStuff eine beliebte Website, auf der Kinder interaktive Kunsprojekte durchführen können. Die Beliebtheit der Seiten ist so stark angestiegen, dass die Firma mit den vielen Anfragen kaum noch Schritt halten kann.
Um dem breiteren Publikum von DoodleStuff gerecht zu werden, hätte die Chefin für Webprojekte gerne eine Web-Applikation. Diese soll ohne Flash und andere Browser-Plugins auskommen.
Werden Sie zum Monstermacher
Hier sehen Sie die Projektvorlagen der Chefin für Webprojekte, zusammen mit den Dateien des Grafikdesigners, die in der Applikation verwendet werden sollen.
Die Projektanforderungen und benötigten Grafiken sind sehr detailliert. Allerdings hat der Grafikdesigner noch keinen HTML- oder CSS-Code geschrieben. Da müssen wir also anfangen. Was brauchen Sie, um die Aufgabenstellung zu bewältigen?
Der Monstermacher braucht Layout und Positionierung
Wie bereits gesagt, ist es wichtig, dass Struktur und Stildefinitionen für die Seite stehen müssen, bevor Sie mit dem Schreiben von jQuery anfangen können. Und das ist hier sogar noch wichtiger. Wenn das Layout und die Positionierung der Elemente nicht stimmen, kann es schnell zu Problemen mit den Effekten und Animationen kommen. Nichts ist schlimmer, als seinen jQuery-Code anzustarren und sich zu fragen, warum er im Browser nicht tut, was Sie wollen. Daher ist es eine gute Idee, die Gedanken erst einmal zu skizzieren und sich klarzumachen, was auf dem Bildschirm eigentlich passieren soll.
Übung
Ergänzen Sie die leeren Zeilen in den HTML- und CSS-Dateien um die CSS-IDs, -Eigenschaften bzw. -Deklarationen, die Ihnen beim Layout und der Positionierung der Elemente in der Monstermacher-Applikation helfen. Wenn Sie sich nicht ganz sicher sind, sehen Sie auf der vorigen Seite nach. Ein paar Dinge haben wir bereits für Sie ausgefüllt.
Lösung zur Übung
Ergänzen Sie die leeren Zeilen in den HTML- und CSS-Dateien um die CSS-IDs, -Eigenschaften bzw. -Deklarationen, die Ihnen beim Layout und der Positionierung der Elemente in der Monstermacher-Applikation helfen. Wenn Sie sich nicht ganz sicher sind, sehen Sie auf der vorigen Seite nach. Ein paar Dinge haben wir bereits für Sie ausgefüllt.
Die Schnittstelle anklickbar machen
Jetzt, wo das visuelle Layout der Monstermacher-Applikation steht, können wir uns um den Rest der in der Projektvorlage beschriebenen Benutzerschnittstelle kümmern. Hier geht es wieder einmal darum, Dinge anzuklicken, damit etwas passiert. Das sollten Sie aus den letzten vier Kapiteln bereits ganz gut kennen. Die Einrichtung sollte für Sie ein – Pardon! – Kinderspiel sein.
Es gibt keine: Dummen Fragen
F:
F: Ich kenne mich mit CSS-Positionierung nicht so gut aus. Warum wird die für jQuery-Effekte und -Animationen gebraucht?
A:
A:
position
ist eine CSS-Eigenschaft, mit der Sie festlegen können, wo und wie die Elemente von der Layout-Engine des Browsers platziert werden. Viele der jQuery-Effekte werden anhand der
position
-Eigenschaft umgesetzt. Wenn Ihnen das alles etwas fremd vorkommt, finden Sie eine ausgezeichnete Einführung auf den Seiten des Mozilla Developer Network unter
Weitere Kostenlose Bücher