JQuery Kochbuch (German Edition)

Wünschen.
    Aber wir müssen in unsere Oberfläche defintiv noch mehr Arbeit stecken, damit sie dem gewünschten Design noch näher kommt ( Figure 15-10 ): Die Registerkarten sind zu klein und es fehlen die von uns gewünschten Symbole. Zudem ist der Header des Datepickers im Datepicker-Widgets mit eingeschlossen, wo er doch oberhalb zu finden sein sollte. In Layout und Theme-Styles von jQuery UI überschreiben werden wir uns anschauen, wie wir ein paar kleine Anpassungen an den Theme-Styles vornehmen können, um unserem Design noch näher zu kommen.
    ----
    Note
    Wenn die jQuery UI-Widgets auf Ihrer Seite keine Rücksicht auf das Theme-Stylesheet nehmen, prüfen Sie nochmals den Verzeichnispfad auf das Theme-Stylesheet und korrigieren Sie eventuell vorhandene Tippfehler. Hilft das nicht, deaktivieren Sie temporär alle Styles oder Skripten, die nichts mit jQuery zu tun haben, um herauszufinden, ob sie dem Laden oder Rendern des Theme-Stylesheets in die Quere kommen. Versuchen Sie dann, diese Fehler zu beheben.
    ----
    Figure 15-10. Unsere Benutzeroberfläche mit dem angepassten ThemeRoller-Theme (A) und mit dem eigentlichen Ziel-Design (B)
    Diskussion
    Da die ThemeRoller-Themes einem ganzheitlichen Ansatz folgen und sich auf mehrere Widgets anwenden lassen, ist es recht hilfreich, sich Gedanken darüber zu machen, wie die verschiedenen Framework-Klassen miteinander zusammenspielen. Entscheiden Sie sich dafür, ein eigenes Theme von Grund auf selbst zu entwerfen, oder ein bestehendes Theme sehr stark abzuwandeln, dann sollten Sie ein paar Dinge berücksichtigen:
    Erstellen Sie einheitliche Hintergründe für Header-Bereiche, Toolbars und Inhalts-Bereiche, so dass sich die »aktuelle« Registerkarte ohne Bruch mit dem Inhalts-Bereich verbindet. Denken Sie auch an die Rahmen, die die gleiche Farbe haben sollten.
    Bei anklickbaren Elementensollten sich die Styles deutlich voneinander unterscheiden, damit der Anwender auch den Unterschied erkennt. Im Folgenden sind ein paar Möglichkeiten beschrieben, wie man dafür sorgen kann, dass die Styles genug Differenz aufweisen:
    Nutzen Sie gespiegelte Bild-Texturen für die aktiven und Standard-Styles bei anklickbaren Elementen, um ein dreidimensionales Aussehen zu erhalten. So kann zum Beispiel eine »Highlight«-Textur für den Standard-Button-Style sehr gut mit einer »eingelassenen« Textur für den aktiven Button-Style kombiniert werden. Der Button sieht dann so aus, als ob er beim Anklicken wirklich eingedrückt wird.
Wenn Sie die gleiche Textur für anklickbare Elemente und für Hover nutzen, sollten Sie sicherstellen, dass sich die Hintergrundfarbe und die Bild-Opazität ausreichend unterscheiden (im Allgemeinen mindestens um 10%), um eine deutliche sichtbare Änderung aufzuzeigen.
    Optimieren Sie Ihre Themes im Hinblick auf Geschwindigkeit, indem Sie das gleiche Bild für mehrere Styles nutzen. Zum Beispiel:
    Nutzen Sie die gleiche Symbolfarbe für mehrere Styles, dann benötigt das Stylesheet weniger HTTP-Anfragen, wodurch die Seitenperformance verbessert wird.
Sie können auch das gleiche Hintergrundbild (Farbe plus Textur-Opazität) für mehrere Styles verwenden. In diesem Fall ist es aber wichtig, dass die anderen Style-Elemente – Rahmen-, Text- und Symbolfarben – ausreichende Unterschiede aufweisen, um klar trennbar zu sein.
    ----
    Note
    Um Änderungen an Ihrem eigenen Theme vorzunehmen, ohne wieder von vorne beginnen zu müssen, öffnen Sie das Stylesheet des Themes, suchen nach dem Kommentar, der mit den Worten »To view and modify this theme, visit http://jqueryui.com/themeroller/…« beginnt und kopieren die Theme-URL in die Adresszeile eines Browsers. Damit öffnen Sie ThemeRoller mit den Einstellungen des Themes.
    ----

Layout und Theme-Styles von jQuery UI überschreiben
    Problem
    Das angepasste Theme (oder eines aus der Standard-Galerie), das Sie in ThemeRoller erstellt und heruntergeladen und dann in Ihrem Projekt referenziert haben, entspricht zwar schon größtenteils Ihrem Ziel-Design, aber es passt noch nicht ganz. Sie müssen die Styles anpassen, gleichzeitig wollen Sie aber sicherstellen, dass Änderungen an diesen Styles kein Hindernis beim Upgrade auf neuere Version von jQuery UI-Skripten oder CSS-Code sind.
    Lösung
    Erstellen Sie eigene überschreibende Styles, die auf die Komponenten eingeschränkt sind, die zusätzliche Anpassungen benötigen. Strukturieren Sie sie so, dass es keine Konflikte mit Standard-CSS-Dateien von jQuery UI