JQuery Kochbuch (German Edition)

gibt.
    ----
    Note
    Dieses Rezept geht von folgenden Annahmen aus:
    Sie haben Grundlagenwissen über die Funktionsweise von CSS und insbesondere das Kaskadieren von Styles, die Vorrangeinstellungen und das Einschränken von Selektionen mit Klassen, IDs oder Elementen. (Lesevorschläge finden 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.)
    ----
    Jedes jQuery UI-Widget ist so entworfen, dass es beim Herunterladen der jQuery UI-Skripten und eines Themes direkt funktioniert. Sie müssen keine Änderungen am CSS-Code vornehmen, um die Widgets oder Styles auf Ihrer Seite einsetzen zu können. Aber es kann sein, dass die Styles nicht genau den Design-Konventionen in Ihrem Projekt entsprechen. So wollen Sie vielleicht die Abstände verringern oder für einen Header ein eigenes Hintergrundbild verwenden.
    Lassen Sie uns dort fortfahren, wo wir mit dem letzten Rezept aufgehört haben, und mit unserer Reise-Buchungs-Anwendung weitermachen. Wir haben das Theme-Stylesheet korrekt erzeugt, heruntergeladen und angewendet, aber die Standard-Styles von jQuery UI für die Registerkarten und den Datepicker passen nicht ganz zum Design unseres Projekts (siehe Figure 15-11 ).
    Figure 15-11. Unsere Oberfläche mit dem angepassten ThemeRoller-Theme (A) und das Ziel-Design vom Designer (B)
    Schritt 1. Markup und Styles des Widgets des jQuery UI-Plugins untersuchen
    Als erstes werden wir uns anschauen, wie die Klassen im Markup-Code des jQuery UI-Widget genutzt werden, um besser zu verstehen, wie sie angewendet (und daher überschrieben) werden können.
    Lassen Sie uns mit dem Markup der Registerkarten beginnen. Wenn das Tabs-Widget von jQuery UI auf der Seite initialisiert wird, weist das Plugin-Skript dem Widget-Markup eine ganze Reihe von Klassen zu, wie wir gleich sehen werden. (Beachten Sie, dass dies das Markup ist, das vom Plugin-Skript umgewandelt oder eingefügt wurde. Es handelt sich um das fertige Produkt, nicht um das Markup, das vor der Ausführung des JavaScript-Codes im DOM vorhanden ist.)
    Achten Sie insbesondere auf die Klassen, die mit dem Präfix
ui-tabs
beginnen – die Widget-spezifischen Klassen für die Registerkarten – die wir im Fettdruck zeigen:

    Diese Klassen definieren die Styles, die das Layout des Widgets kontrollieren und dafür sorgen, dass es bezüglich des Designs korrekt arbeitet. In diesem Fall wandeln sie eine ungeordnete Liste mit Links und