JQuery Kochbuch (German Edition)

wird angezeigt und
sizeModal()
aufgerufen, um das Fenster zu zentrieren und die Größe an die Höhe des Inhalts anzupassen. Wenn die Größe korrekt festgelegt wurde, wird das Fenster selbst angezeigt. Zudem binden wir noch eine
onload
-Funktion an alle dynamisch eingefügten Bilder. Dies dient Browsern, die die Dimensionen eines Bildes nicht kennen, solange es nicht vollständig geladen wurde. Die Funktion
showModal()
wird allerdings erst später aufgerufen.
    Beim Laden des Dokuments fügen wir noch direkt vor dem schließenden

-Tag das Markup für das modale Fenster ein.
    Alle Links mit
class="modal"
erhalten noch einen Click-Listener.Wenn ein modaler Link angeklickt wird, dann werden einige Tests durchgeführt, um herauszufinden, was für Inhalte geladen werden sollen. Beginnt der Link mit einem Hash-Zeichen (
#
), gefolgt von einem oder mehreren Zeichen, wissen wir, dass der einzubindende Inhalt direkt auf der Seite vorhanden ist. In solchen Fällen wird der HTML-Inhalt aus der ID in das modale Fenster kopiert. Der zweite Tests prüft auf Bilder. Endet
href
mit
.jpg
,
.png
, or
.gif
, dann wird ein

-Tag erzeugt und der Wert von
href
nach
src
kopiert. Wenn keines dieser Kriterien erfüllt ist, handelt es sich sehr wahrscheinlich um eine externe Seite. In diesem Fall wird die jQuery-Methode
.load()
aufgerufen, der HTML-Inhalt von dieser Seite übernommen (und von einer bestimmten ID, falls ein Hash vorhanden ist) und in das modale Fenster eingefügt.
    Dann fügen wir Click-Event-Listener zum modalen Overlay (dem grauen Hintergrund) und zum Schließen-Button hinzu. Wird eines davon angeklickt, wird das modale Fenster verborgen, alle modalen Bilder von ihren Event-Listenern befreit, der Inhalt des Fensters auf einen leeren String gesetzt und der Text der Titelzeile des Fenster zurückgesetzt.
    Als letztes folgt noch ein Event-Listener speziell für den IE 6, der darauf achtet, ob das Fenster gescrollt wird. Ist der Wrapper für das modale Fenster sichtbar (und damit auch alles, was damit verbunden ist), wird
positionModal()
aufgerufen, wenn der Anwender die Seite scrollt. Damit ist sichergestellt, dass das modale Fenster dort bleibt, wo es mit
position: fixed
stehen würde.

Dropdown-Menüs erstellen
    Problem
    Irgendwann werden Sie immer auf einen Kunden oder Chef treffen, der in einer Navigationsstruktur einer Site alles »nur einen Klick entfernt« haben will. Das ist zwar kein völlig abwegiger Wunsch, aber wenn man einer Seite die Links für jeden einzelnen Bereich einer Site mitgeben möchte, sorgt das für deutlich umfangreicheren HTML-Code. Damit kommen wir zu den Dropdown-Menüs.
    Lösung
    Bei Desktop-Programmen und Betriebssystemen werden diese Menüs häufig dadurch aktiviert, dass man einen Begriff anklickt. Dann erhält man eine Liste von Unterbegriffen und Kategorien. Im Web aber scheint eher das Paradigma vorzuherrschen, dass Dropdown-Menüs schon erscheinen, wenn der Anwender die Maus über einen Link auf oberster Ebene bewegt (siehe Abbildungen 13-7 und 13-8 ). Durch eine Kombination aus CSS-
:hover
-Regeln und Positionierungstechniken lässt sich ein Großteil schon ohne JavaScript erzielen. jQuery bietet dabei noch kleine Verbesserungen für den IE 6.
    Eine kleine Warnung an Entwickler: Bedenken Sie die Auswirkungen auf die Barrierefreiheit für Anwender, die nicht mit der Maus arbeiten können. Es ist wie das alte Sprichtwort: »Wenn Sie nur einen Hammer haben, sieht alles wie ein Nagel aus.« Bevor Sie einfach auf Dropdown-Menüs als fertige Lösung zurückgreifen, sollten Sie sichergehen, dass die Informations-Architektur des Projekts wohldurchdacht wurde und die Dropdown-Menüs auch wirklich die beste Wahl sind. So war Microsoft Word zum Beispiel lange für seine tief verschachtelten Dropdown-Menüs und umschaltbaren Optionen berüchtigt (von denen der durchschnittliche Anwender die meisten nie genutzt hat). Nach dem Redesign in Office 2007 mit den als »Ribbons« dargestellten Registerkarten wurden manche unbedeutenden Optionen plötzlich regelmäßig genutzt, weil man besser auf sie zugreifen konnte.
    Figure 13-7. Dropdown-Menü bereit zum