JQuery Kochbuch (German Edition)

verwenden.)
    ----

    In den vorigen beiden Rezepten haben wir ein Theme mit ThemeRoller erstellt und heruntergeladen, um dann mit ein paar CSS-Regeln die Standard-Theme-Styles zu überschreiben und sie unserem Ziel-Design näher zu bringen. Jetzt gehen wir noch einen Schritt weiter und wenden Framework-Klassen auf andere Elemente in unserem Projekt an, um diese mit den jQuery UI-Widgets und dem Theme in Einklang zu bringen.
    Schritt 1: Die verfügbaren Framework-Klassen untersuchen, um diejenigen zu ermitteln, die Sie auf Ihre Komponenten anwenden können
    Framework-Klassensind Teil des jQuery UI Theme-Stylesheets, das Sie herunterladen, wenn Sie in ThemeRoller ein Theme erstellen. Sie sind nach ihrem Zweck benannt und sorgen für die Theme-Styles, wie zum Beispiel Hintergrund-Farben und -Texturen, Rahmen- und Schrift-Farben, abgerundete Ecken und Symbole. Framework-Klassen sind in die jQuery UI-Widgets eingebaut, aber sie lassen sich auch auf beliebige andere Elemente anwenden – wie zum Beispiel eigene Widgets, die Sie selbst entwickelt oder von einem dritten übernommen und erweitert haben – um ein konsistentes Look and Feel für Ihre gesamte Site oder Anwendung zu erzielen.
    Im Folgenden finden Sie einen Überblick über die Klassen, die das Framework bilden, die Styles, die durch sie angewendet werden, und allgemeine Regeln, wie Sie sie in Ihrem eigenen Code referenzieren.
    ----
    Note
    Sofern nicht anders erwähnt, werden alle Styles, die durch Framework-Klassen gesetzt werden, von Kind-Elementen geerbt.Dazu gehören auch alle Text-, Link- und Symbol-Styles.
    ----
    Layout-Hilfsklassen verbergen Inhalte oder beheben häufiger vorkommende strukturelle Probleme – zum Beispiel das vollständige Umhüllen eines Containers um gleitende Kind-Elemente:
    .ui-helper-hidden
Weist
display: none
zu. Inhalte, die auf diesem Weg verborgen werden, sind dadurch für Screenreader eventuell nicht mehr lesbar.
    .ui-helper-hidden-accessible
Positioniert ein Element außerhalb der Seite, so dass es nicht sichtbar, für Screenreader aber immer noch erreichbar ist.
    .ui-helper-reset
Entfernt geerbte Abstände, Ränder, Rahmen, Outline, Textauszeichnungen und
list-style
; setzt
line-height
auf 1.3 und
font-size
auf 100%.
    .ui-helper-clearfix
Zwingt Container-Elemente, die nicht gleiten, gleitende Kind-Elemente vollständig zum umschließen.
    Widget-Containerklassen sollten nur auf die Elemente angewendet werden, für die sie gedacht sind, da ihre untergeordneten Verweise die Styles von ihnen erben:
    .ui-widget
Wendet die Schriftart und Größe des Themes auf das gesamte Widget an und setzt explizit die gleiche Familie und eine Schriftgröße von 1em auf die untergeordneten Form-Elemente, um die Vererbung zu erzwingen.
    .ui-widget-header
Wendet fette Schriftarten an.
    .ui-widget-content
Wendet die Rahmenfarbe, die Hintergrundfarbe und das Hintergrundbild sowie die Textfarbe an.
    Interaktions-Status-Styles versehen anklickbare Elemente – wie Buttons, Akkordeon-Header und Registerkarten – mit einem Style, um dem Anwender die richtige Rückmeldungung über den Status zu geben. Jede Klasse sorgt für eine Rahmenfarbe, für Hintergrundfarbe und Hintergrundbild sowie für eine Textfarbe. Die Klassen, die auf
-hover
,
-focus
und
-active
enden, sind dazu gedacht, ihre CSS-Pseudoklassen (
:hover
,
:active
,
:focus
) als Gegenstücke zu ersetzen. Sie müssen einem Element per Client-Skript zugewiesen werden. Status-Klassen sind so entworfen, dass Style-Konflikte und eine gesteigerte Komplexität der Selektionskriterien vermieden werden, die bei der Verwendung von Pseudoklassen im CSS zwangsläufig entstehen. (Wenn Sie in Ihrem Projekt Pseudoklassen benötigen, können Sie sie den Override-Stylesheets hinzufügen. Siehe dazu auch Layout und Theme-Styles von jQuery UI überschreiben .)
    .ui-state-default
.ui-state-hover
.ui-state-focus
.ui-state-active
    Interaktions-Styles geben dem Anwender Rückmeldung. Das geschieht durch Hervorheben, bei Fehlermeldungen, deaktivierten Form-Elementen oder Hierarchien. Alle weisen die Rahmenfarbe, Hintergrundfarbe und Hintergrundbild sowie die Textfarbe zu:
    .ui-state-highlight
Weisen Sie diese Klasse zu, um eine Komponente temporär hervorzuheben.
    .ui-state-error
Weisen Sie diese Klasse einer beliebigen Komponente zu, die eine Fehlermeldung enthält.
    .ui-state-error-text
Weist nur die Farben für den Fehler-Text und die Symbole zu, ohne den Hintergrund zu verändern.
    .ui-state-disabled
Verpasst einem