Bücher online kostenlos Kostenlos Online Lesen
jQuery von Kopf bis Fuß (German Edition)

jQuery von Kopf bis Fuß (German Edition)

Titel: jQuery von Kopf bis Fuß (German Edition) Kostenlos Bücher Online Lesen
Autoren: Ryan Benedetti , Ronan Cranley
Vom Netzwerk:
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