JQuery Kochbuch (German Edition)

Form-Element einen Style, der es deaktiviert erscheinen lässt. Dazu wird eine niedrige Opazität genutzt, wodurch der Style auch zusammen mit anderen Klassen funktioniert, die das Element verändern. Beim Anwenden dieser Klasse ist das Element immer noch nutzbar – um die Funktionalität auch zu deaktivieren, müssen Sie das Attribut
disabled
für das Form-Element verwenden.
    .ui-priority-primary
Weisen Sie diese Klasse einem Button zu, wenn seine ausgelöste Aktion gegenüber anderen Aktionen zu priorisieren ist (zum Beispiel Speichern gegenüber Abbrechen). Zeigt fettgedruckten Text an.
    .ui-priority-secondary
Weisen Sie diese Klasse einem Button zu, wenn seine ausgelöste Aktion gegenüber anderen Aktionen nicht oberste Prioriät hat (zum Beispiel Abbrechen). Zeigt einen normalen Text und verringerte Opazität an.
    Icon-Klassen sorgen für zusätzliche Rückmeldung in Form von Pfeilen und informativen Symbolen, wie zum Beispiel ein x oder ein Mülleimer, um einen Button zum Löschen zu verdeutlichen. Ein Symbol wird einem Element mit zwei Klassen zugewiesen:
    .ui-icon
Basisklasse, die die Dimensionen des Elements auf ein Quadrat mit 16 Pixeln Höhe und Breite setzt. Zusätzlich wird der Text verborgen und das von ThemeRoller erzeugte kleine Bild als Hintergrund genutzt.
    .ui-icon-[type]
»type« ist eine Kennung für das grafische Symbol, das angezeigt wird. Dabei kann es sich um ein einzelnes Wort (
ui-icon-document
,
ui-icon-print
) oder eine Kombination aus Wörtern, Ziffern und Abkürzungen handeln. So zeigt zum Beispiel
.ui-icon-carat-1-n
eine einzelne Pfeilspitze an, die nach Norden weist, während
.ui-icon-arrow-2-e-w
eine doppelte Pfeilspitze nach Osten und Westen darstellt.
    ----
    Note
    Da die Basisklasse
ui-icon
die Dimensionen eines Elements beeinflusst und den gesamten inneren Text ausblendet, ist es sinnvoll, für Symbole eigene Elementen zu nutzen (zum Beispiel

-Tags), so dass die Styles andere untergeordnete Inhalte oder Elemente nicht negativ beeinflussen. Zur Barrierefreiheit sollten Sie eine kurze Beschreibung im

-Tag mit aufnehmen. Der Anwender bekommt diese nicht zu Gesicht, aber Screenreader können sie nutzen.
    Zudem wird jedem Element mit der Klasse
.ui-icon
abhängig vom Status des übergeordneten Containers ein Sprite-Hintergrundbild zugewiesen. So wird zum Beispiel ein Symbol-Element innerhalb eines Containers mit der Klasse
.ui-state-default
Symbole in der durch
ui-state-default
definierten Farbe anzeigen, die Sie in ThemeRoller festgelegt haben.
    ----
    jQuery UI stellt eine große Sammlung von Framework-Symbolen bereit ( Figure 15-16 ). In ThemeRoller können Sie deren Standard- und Hover-Styles anzeigen, indem Sie mit dem Mauscursor über ein Symbol in der Widget-Beispielspalte fahren. Zudem erhalten Sie so den Klassennamen eines Symbols.
    Figure 15-16. jQuery UI enthält eine große Sammlung von Symbolen in einem einzelnen Bild. Die Symbole lassen sich in ThemeRoller anzeigen
    Die Hilfsklassen für Eck-Radien weisen einer Auswahl von Ecken oder allen Ecken eines Containers Rundungen zu. Der letzte Teil des Klassennamens gibt dabei an, welche Ecken betroffen sind:
    .ui-corner-tl
oben links
    .ui-corner-tr
oben rechts
    .ui-corner-bl
unten links
    .ui-corner-br
unten rechts
    .ui-corner-top
beide oberen Ecken
    .ui-corner-bottom
beide unteren Ecken
    .ui-corner-right
beide rechten Ecken
    .ui-corner-left
beide linken Ecken
    .ui-corner-all
alle vier Ecken
    Overlay- und Shadow-Klassen können genutzt werden, um einer Site oder Anwendung eine gewissen »Tiefe« zu verleihen:
    .ui-widget-overlay
Weist dem Modal Screen 100% Breite und Höhe, einen Hintergrund und eine Opazität zu. Der Modal Screen ist ein Layer, der sich zwischen einem modalen Dialog und dem eigentlichen Seiteninhalt befindet. Damit kann man den Seiteninhalt zwischenzeitlich deaktivieren, bis das modale Fenster wieder geschlossen wird.
    .ui-widget-shadow
Weist einen Hintergrund, Eck-Radien, eine Opazität und Offsets oben und links zu, um den Schatten hinter einem Widget anzuzeigen, zudem sorgt die Klasse für eine »Schattenbreite« (ähnlich der Rahmenbreite).
    Da diese Framework-Klassen Theme-Styles auf jQuery UI-Widgets anwenden, sie aber auch beliebige Komponenten auf Ihrer Seite beeinflussen können, verwenden wir sie für eine einheitliche Benutzeroberfläche. In diesem Rezept werden wir zeigen, wie man drei Arten von Framework-Klassen nutzt:
    Klassen für anklickbare Elemente, unter