vorgegangen, um einen visuellen Hinweis darauf zu geben, welches Bild gerade aktiv ist. Nach einer kurzen Verzögerung von zwei Sekunden wird die gesamte Abfolge wieder gestartet. Wenn die Demo damit enden würde, könnte es ziemlich nervig sein, sich die Bilder anzuschauen – man kann den Ablauf nämlich nicht stoppen. Zum Glück können wir die Link-Technik für Verweise innerhalb der Seite nutzen, die wir bei der Registerkarten-Lösung kennengelernt haben. Dabei weisen wir einfach jedem der Links in
Click-Listener zu und zeigen dann das Ziel-Bild an, während wir den Rest verbergen. Zudem fügen wir einen Play/Pause-Button hinzu, der den Rotator startet oder wieder stoppt. Schließlich haben wir noch den Code, der alles startet. Bis auf das erste
in werden alle verborgen, und wenn das Fenster fertig geladen ist, wird die Animation gestartet. Beachten Sie, dass $(window).load() etwas anderes ist als $(document).ready() , da bei der erstgenannten Funktion gewartet wird, bis alle Elemente der Seite vollständig geladen sind – auch die Bilder, was für einen Bild-Betrachter ziemlich wichtig ist. Die zweite hingegen wartet nur, bis die HTML-Struktur vollständig vorhanden ist, was für neue Funktionalität wichtig ist, die schon ablaufen kann, während die Bilder noch geladen werden. Beide Funktionen sind wichtig und jede hat ihre Berechtigung.
Sliding Panels Problem Gelegentlich müssen Sie eine horizontale Auswahl von Werten mit einer gewissen Eleganz präsentieren, haben aber mehr Auswahlwerte als die Breite des Bereichs erlaubt. Oder vielleicht soll es auch irgendeine geniale Benutzer-Interaktion geben. Wie auch immer, das Sliding Panel (manchmal auch als horizontales Akkordeon bezeichnet) ist ein möglicher Weg, solche Informationen darzustellen. Figure 13-9 zeigt ein »geschlossenes« Panel, während Sie in Figure 13-10 ein Panel sehen, das gerade hervorgehoben ist. Lösung In diesem Rezept nutzen wir ein paar der Konzepte, die wir im Akkordeon-Rezept verwendet haben, aber anstatt die Inhalts-Panel vertikal auf- und zuzuziehen, gestalten wir die Animation horizontal. Zudem nutzen wir einen CSS-Positionierungstrick, um die kleinen Rechenfehler bei gleichzeitig animierten Panels zu umgehen. Statt uns um die Synchronisierung zwischen jedem Panel Sorgen zu machen und darauf zu achten, eine pixelgenaue Präzision zu jedem Sekundenbruchteil zu erhalten, nehmen wir einfach das letzte
in
und positionieren es absolut zur oberen rechten Ecke des
. Die Summe der Breiten aller Panels ist dann zwar beim Animieren gelegentlich größer als 100% des
, aber das letzte
bleibt immer da, wo es hingehört. Figure 13-9. Horizontales Panel, noch geschlossen Figure 13-10. Horizontales Panel, geöffnet Panel – HTML-Code "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Kostenlos Online Lesen 
