Window-Objekt und interaktive Navigation

Ein Fenster erstellen

hierfür kann man die open()-Methode verwenden:

open(URL, name, eigenschaft)

Wie man sehen kann erwartet sie drei Argumente: die URL der Seite, den Namen des Fensters (beliebig) und einen String mit den Einstellungen für das neue Fenster (z.B. Höhe und Breite).

Außerdem kann man beim Öfnnen eines neuen Fensters eine Variable erstellen, die eine Referenz auf dieses Fenster speichert. So kann man z.B. die Startseite von Google in einem 200 x 200 Pixel großen Fenster öffnen:

var neues Fenster= open (‚http://www.google.de/‘, ‚das Fenster‘, ‚height=200, width=200‘);

Fenstereigenschaften

Eigenschaften sind z.B.:

• Breite
• Höhe
• Position auf dem Bildschirm
• Symbolleiste

Damit die Adressleiste auf jeden Fall angezeigt wird, muss man den Eigenschaften location=yes hinzufügen.

Eigenschaften , die die Größe, oder die Position des Fensters betreffen, werden in Pixel angegeben. Die anderen Eigenschaften erwarten entweder den Wert yes, oder no.

Die folgenden Eigenschaften kann man festlegen, ändern, usw:

• height: legt die Höhe Des Fensters in Pixeln fest (gibt man hierfür nichts an, verwendet der Browser die Größe des aktuellen Fensters)
• width: legt die Fensterbreite fest (in Pixeln)
• left: Entfernung des Fensters in Pixeln vom linken Rand
• top: Entfernung in Pixeln vom oberen Rand des Monitors
• resizable: gibt an, ob Besucher die Fenstergröße mit der Maus ändern kann
• scrollbars: wenn man diese Eigenschaft auf no setzt, werden beide ausgeblendet
• status: legt die Darstellung der Statuszeile am unteren Rand des Fensters fest
• toolbar: entscheidet über die Sichtbarkeit der Symbolleisten mit den Navigationsbuttons, den Lesezeichen und den anderen Steuerelementen des Browsers.
• location: gibt an, ob das Adressfeld sichtbar ist

Die Fensterrefernz verwenden

Sobald man ein neues Fenster geöffnet hat, kann man es über die Referenz steuern.

Hier folgen die wichtigsten Methoden:

• close() : schließt das angegebene Fenster
• blur(): hiermit verliert das Fenster den Fokus
• focus(): bringt das Fenster in den Vordergrund vor allen Fenstern
• moveBy(): dadurch kann man Fenster um eine bestimmte Anzahl an Pixeln nach rechts und unten versetzen(zwei Argumente, eines für nach rechts schieben, das andere für nach unten schieben)
• moveTo(): verschiebt das Fenster an eine bestimmte Stelle auf dem Monitor, die durch die Werte für die linke und obere Position festgelegt wird
• resizeBy(): ändert die Höhe und Breite des Browserfenster (wieder zwei Argumente)
• resizeTo():ändert die Maße des Fensters auf eine bestimmte Höhe und Breite
• scrollBy(): scrollt das Dokument im Fenster um die angegebenen Pixel nach rechts und unten.
• scrollTo(): scrollt das Dokument im Fenster an eine bestimmte Position vom rechten oberen Rand der Seite aus gesehen

Das window-Objekt repräsentiert ein Browserfenster oder ein Frame und hat folgende Eigenschaften:

Die Höhe und Breite von Fenstern unterscheiden sich sehr oft von denen des Dokuments. Die Dimension des Fensters bezieht sich auf den Viewport.

Akkordeon-Register

Damit eine Website nicht allzu voll gepackt ist mit Informationen und somit nicht mehr wirklich leserlich ist, gibt es so etwas wie das Akkordeon Register. Dieses kennt man z.B. aus Online-Shops. Als Frau geht man dann auf Damen und wenn man darauf klickt, öffnen sich darunter weitere Kategorien, wie z.B. Hosen, Kleider, Röcke usw. Das ganze sieht so aus:

Um diesen Effekt zu erzielen, hilft mal wieder jQuery, und diese Bibliothek verkürzt das ganze auf 4 Schritte:

1. Das Accordion-Plug-in und mehrere andere externe JS-Dateien in die Seite einbinden (so wie alle externe Dateien)
2. Erstellen eines HTML-Tags als Container für die Akkordeon Elemente: ein HTML-Tag muss die Registerkarte und Bereiche des Akkordeons enthalten. Am einfachsten ist es, das Akkrodeon-HTML in ein <div>-Tag mit einer ID zu schreiben
3. Strukturieren des HTMLs: Für das Akkordeon Tag muss HTML bestimmt strukturiert sein. Es muss ein Tag geben, das als Auslöser fungiert, also die Registerkarte, die den Akkordeon-Bereich öffnet.So kann man die Überschriften Tags als Auslöser verwenden, gefolgt vone ienm <div> für die einzelnen Akkordeon Elemente
4. Die accordion()-Funktion auf das Containerelement anwenden und Kennzeichnen der Tab-Elemente:dieser Funktionsaufruf wird in die typische jQuery Funktion $(document).ready() geschrieben. Außerdem muss der accordion-Funktion mitgeteilt werden, welche Elemente als Tabs des Akkordeons dienen. So würde das dann aussehen:

Man kann das Akkordeon noch mit zusätzlichen Optionen weiter anpassen (z.B. mit einem Event verknüpfen, wie mouseover).

Das Aussehen des Akkordeons wird ausschließlich mit CSS gesteuert.

Das war der Code des Akkordeons, das wir innerhalb der Vorlesung programmiert hatten, oder besser gesagt ein Teil davon: