JQuery Kochbuch (German Edition)

Fehler kann ein Schlagschatten-Style optional auf Overlays angewendet werden. Schlagschatten haben eine Hintergrundfarbe, Textur und Opazität (wie Header und anklickbare Elemente) sowie eine Schatten-Dicke, die angibt, wie weit der Schatten von der oberen linken Ecke der Komponente reichen soll, und einen Eck-Radius. Damit der Schatten gleichmäßig um alle Seiten der Komponente herum erscheint, sollten der obere und linke Offset-Wert negativ, aber gleich der Schatten-Breite sein. Wie beim normalen Eck-Radius können Sie einen Radius in Pixeln oder ems setzen oder Null angeben, um eckige Ecken zu erhalten.
    Mit ThemeRoller können Sie direkt alle Styles der Framework-Klassen bearbeiten und sich anzeigen lassen, wie das Ergebnis in jQuery UI-Widgets aussieht. Wenn Sie ein Theme erstellt haben, generiert ThemeRoller automatisch den notwendigen CSS-Code und die Hintergrundbilder und packt sie zusammen. Sie laden dann einfach das Theme-Stylesheet herunter und referenzieren es in Ihrem Projekt. (Sie finden ThemeRoller im Themes-Bereich der jQuery UI-Site oder unter http://themeroller.com .)
    Nachdem wir jQuery UI CSS und ThemeRoller näher erläutert haben, wollen wir uns in vier Rezepten mit dem Anpassen von Themes befassen. Als erstes beginnen wir mit dem einfachen Schritt, ein Theme zu erstellen und Widgets mit Hilfe von ThemeRoller mit Styles zu versehen ( Themes für jQuery UI-Widgets mit ThemeRoller erstellen ). Dann befassen wir uns mit dem etwas komplexeren Überschreiben von Framework-Klassen, um Themes noch mehr anzupassen ( Layout und Theme-Styles von jQuery UI überschreiben ), mit der Verwendung von Framework-Klassen in Ihrem Projekt ( Ein Theme auf Komponenten anwenden, die nicht zum jQuery UI gehören ) und schließlich mit der Nutzung mehrerer Themes auf einer einzelnen Seite für komplexe Oberflächen ( Mehrere Themes auf einer einzelnen Seite verwenden ).
    ----
    Note
    Für Designer und Entwickler, die daran interessiert sind, Themes für jQuery UI und eigene, mit ThemeRoller nutzbare Komponenten direkt in der Website oder Anwendung zu bearbeiten und eine Vorschau zu erhalten, haben wir ein herunterladbares ThemeRoller-Bookmarklet-Tool entwickelt. Sie finden das Tool und weitere Erläuterungen dazu unter ui.jquery.com/themeroller .
    ----

Themes für jQuery UI-Widgets mit ThemeRoller erstellen
    Problem
    jQuery UI-Widgets, die Sie auf Ihrer Website oder in Ihrer Anwendung nutzen, müssen zu einem vorgegebenen Design passen.
    Lösung
    Nutzen Sie ThemeRoller, eine einfache Web-Anwendung, mit der Sie jQuery UI CSS Framework-Klassen bearbeiten können, um das Look and Feel der jQuery UI-Widgets anzupassen.
    ----
    Note
    Dieses Rezept geht von folgenden Annahmen aus:
    Sie haben Grundlagenwissen zur Funktionsweise von CSS und insbesondere zum Kaskadieren von Styles, zu Vorrangeinstellungen und zum Einschränken von Selektionen mit Klassen, IDs oder Elementen. (Lesevorschläge finden Sie im Anhang am Ende dieses Kapitels.)
Sie sind schon mit jQuery UI CSS-Klassen vertraut. (Wenn nicht, schauen Sie sich nochmal Die Komponenten von jQuery UI CSS verstehen an.)
    ----
    Lassen Sie uns ein Beispiel durchspielen.
    Wir arbeiten an einer neuen Website, um Reisebuchungen vorzunehmen. Dort geht es gerade um die Oberfläche zum Buchen eines Flugs. Das Design besteht aus einer Reihe von Registerkarten, um die Art der Reservierung auszuwählen (Flug, Mietwagen oder ein Pauschalangebot), und die Registerkarte zur Flugbuchung enthält eine Form zur Eingabe der Anzahl der Passagiere, Auswahlfelder für Abflug- und Zielflughafen, Kalender zur Selektion des Datums für Hin- und Rückflug und einen Button zum Abschicken (siehe Figure 15-1 ).
    In diesem Rezept werden wir die jQuery UI-Widgets für die Registerkarte und die Datepicker verwenden und sie mit einem eigenen Theme versehen, das wir in ThemeRoller erstellt haben. (Sie können das Theme-Stylesheet auch über das hinaus bearbeiten, was ThemeRoller ermöglicht, um dem Ziel-Design noch näher zu kommen – wie das geht, erfahren Sie in den Rezepten – ).
    Figure 15-1. Gewünschtes Design für die Reise-Anwendung
    Schritt 1. ThemeRoller öffnen
    Öffnen Sie die jQuery UI-Website unter http://jqueryui.com und wählen Sie aus der Haupt-Navigationsleise »Themes« aus oder gehen Sie direkt zu http://themeroller.com .
    Die Oberfläche von ThemeRoller ist in zwei Hauptbereiche unterteilt (siehe Figure 15-2 ):
    ThemeRoller-Toolbar in der linken Spalte : Dort stehen Tools zum