JQuery Kochbuch (German Edition)

Sie im Anhang am Ende dieses Kapitels.)
Sie wissen schon, wie Sie ein Theme mit ThemeRoller erstellen und bearbeiten. (Wenn nicht, schauen Sie sich nochmal Themes für jQuery UI-Widgets mit ThemeRoller erstellen an, in dem genauer beschrieben wird, wie Sie solch ein Theme erstellen und auf Ihren Seiten verwenden.)
    ----
    jQuery UI-Themes sind dazu gedacht, in jQuery UI-Widgets und in anderen Oberflächen-Komponenten in einer Anwendung für ein konsistentes Look and Feel zu sorgen. Manchmal aber ist das Design komplexer und bestimmte Widgets müssen anders gestaltet werden – je nachdem, wo sie in der Anwendung erscheinen.
    Bei unserer Reise-Anwendung wollen wir annehmen, dass sich der Designer unser abschließendes Design angesehen hat. Nun ist er der Meinung, das Dunkelgrau aller anklickbaren Elemente erschwert die Unterscheidung zwischen den Reitern und den Form-Feldern auf den Registerkarten. Er entscheidet, dass die Reiter der Registerkarten ihren aktuellen Style beibehalten sollen, während alle interaktiven Komponenten innerhalb der Inhalts-Bereiche – einschließlich Datepicker und Such-Button – einen anderen Style erhalten und standardmäßig gelb aussehen sollen. Figure 15-21 zeigt unser aktuelles und unser neues Design.
    Figure 15-21. Unser ursprüngliches Theme (A) setzt den Standard-Style für alle anklickbare Element auf grau. Das neue Design (B) lässt die Reiter in grau, ändert aber alle interaktiven Komponenten auf den Registerkarten in gelb.
    Es gibt ein paar Möglichkeiten, für den Inhalt der Registerkarten Styling-Ausnahmen zu definieren. Wie in Layout und Theme-Styles von jQuery UI überschreiben beschrieben, könnten wir Override-Regeln nutzen, um die normalen Theme-Styles für den Datepicker und den Button zu verändern. Dazu bräuchten wir ein Design-Tool wie Adobe Photoshop, um all die neuen hexadezimalen Farbwerte zu ermitteln und dann die neuen, gelben Hintergrundbilder zu erzeugen.
    Oder wir könnten einfach ein neues Theme in ThemeRoller erstellen, das unserem zweiten Theme entspricht (hier den gelben anklickbaren Elementen), es auf die Inhalts-Bereiche der Registerkarten einschränken und es dann nach unserem ursprünglichen Theme-Stylesheet einbinden. Der jQuery UI Download Builder stellt eine einfache Möglichkeit für das Einschränken der Gültigkeit eines Themes bereit: Im Bereich »Advanced Theme Settings« auf der Download-Seite kann man einen Scope-Selektor angeben – eine Klasse, eine ID oder einen anderen hierarchischen CSS-Selektor – der es Ihnen erlaubt, genau festzulegen, welche Komponenten durch das zusätzliche Theme beeinflusst werden.
    Bei unserer Anwendung zur Reise-Buchung haben wir schon die in den Rezepten bis beschriebenen Schritte durchgeführt:
    Erstellen und Herunterladen eines Themes, das im Projekt referenziert wird ( Themes für jQuery UI-Widgets mit ThemeRoller erstellen )
Schreiben von zusätzlichen Override-Regeln, um ein paar der Standard-Styles des Themes anzupassen ( Layout und Theme-Styles von jQuery UI überschreiben )
Nutzen einiger Framework-Klassen bei unserem Such-Button, damit er sich an unseren Theme-Styles orientiert ( Ein Theme auf Komponenten anwenden, die nicht zum jQuery UI gehören )
    Jetzt werden wir uns damit befassen, wie man den Gültigkeitsbereich eines zweiten Themes einschränkt und wie man dieses auf unser Projekt anwendet.
    Schritt 1. Ein weiteres Theme mit ThemeRoller erstellen
    Öffnen Sie die Website von jQuery UI ( http://jqueryui.com ) und wählen Sie aus der oberen Navigation Bar den Eintrag »Themes« oder rufen Sie direkt http://themeroller.com auf.
    Wir haben das ursprünggliche Theme so erstellt, dass es alle Widgets in unserem Design beeinflusst. Aber in diesem Fall wollen wir nur die Widgets im Inhaltsbereich der Registerkarten ansprechen – die Reiter sollen ignoriert werden.
    Wie schon in Themes für jQuery UI-Widgets mit ThemeRoller erstellen beginnen wir mit dem Theme »Sunny«, da es dem Gelb der anklickbaren Elemente und den Header-Styles unseres neuen Designs am nächsten kommt ( Figure 15-22 ).
    Figure 15-22. Das neue Ziel-Design mit den gelben anklickbaren Elementen und den Headern für die Registerkarten lässt sich am besten über das Sunny-Theme erreichen
    ----
    Note
    Sie können auch ein bestehendes eigenes Theme als Ausgangspunkt nutzen, um nicht alles nochmals einstellen zu müssen. Dazu öffnen Sie das Theme-Stylesheet, suchen nach dem Kommentar, der mit »To view and modify this theme,