JQuery Kochbuch (German Edition)

{
     background-image: url(../images/icon-tab-flight-on.png);
}

#travel .ui-tabs-nav li.ui-tabs-selected #tab-car {
     background-image: url(../images/icon-tab-car-on.png);
}

#travel .ui-tabs-nav li.ui-tabs-selected #tab-package {
     background-image: url(../images/icon-tab-package-on.png);
}
Unsere Reiter sollten auch noch mehr Abstand und eine größere Schriftart nutzen:
#travel .ui-tabs-nav a {
     font-size: 1.5em;
     padding-top: .7em;
     padding-bottom: .7em;
}
Um mit den Registerkarten abzuschließen, passen wir den Rahmen um den Inhaltsbereich so an, dass er ebenfalls 3 Pixel breit ist:
#travel .ui-tabs-panel {
     border-width: 3px;
     border-top-width: 0;
     padding-top: 1.5em;
}
    Nachdem unsere Registerkarten nun das gewünschte Design besitzen, wollen wir uns dem Header des Datepickers zuwenden. Wie in Figure 15-14 zu sehen, können wir die Header-Komponente – der Bereich über dem Kalender, der die Navigations-Pfeile und die Angabe von Monat und Jahr enthält – so anzeigen, dass er über dem Datepicker und nicht »in« ihm erscheint.
    Figure 15-14. Unser Datepicker mit dem ThemeRoller-Theme (A) und in unserem Ziel-Design (B)
    Wie bei den Registerkarten schreibt das Skript beim Initialisieren des Datepicker-Plugins auf der Seite zusätzlichen Widget-Markup-Code mit Widget-spezifischen und Framework-Klassen, um die Struktur und das Theme korrekt darzustellen. In einer vereinfachten Version des Datepicker-Markups sehen Sie, dass die Widget-spezifischen Klassen den üblichen Namenskonventionen folgen, mit
ui-datepicker
beginnen und jede Komponente kenntlich machen:

    Die Widget-Klassen für Datepicker werden mit folgenden Standard-Style-Regeln zugewiesen:
.ui-datepicker { width: 17em; padding: .2em .2em 0; } .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
position:absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
top: 1px; } .ui-datepicker .ui-datepicker-prev { left:2px; } .ui-datepicker .ui-datepicker-next { right:2px; } .ui-datepicker .ui-datepicker-prev-hover { left:1px; } .ui-datepicker .ui-datepicker-next-hover { right:1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%;
margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em;
text-align: center; } .ui-datepicker .ui-datepicker-title select { float:left; font-size:1em;
margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; } .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse;
margin:0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold;
border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em;
text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane {