JQuery Kochbuch (German Edition)

Registerkarte. Diese Klasse wird dynamisch vom Skript zugewiesen und wird immer nur für eine Registerkarte gleichzeitig genutzt.
    ui-tabs-panel
Inhalts-Bereiche, die zu den Registerkarten gehören.
    ui-tabs-hide
Standard-Style für die Inhalts-Bereiche. Sie sind verborgen, bis sie vom Anwender ausgewählt werden.
    Um die Style-Regeln zu finden, die mit diesen Klassen verbunden sind, öffnen Sie das Theme-Stylesheet und suchen nach dem Block, der mit
ui-tabs
beginnt (per Strg/Cmd-F oder einfach per Scrollen). Beachten Sie, dass die Regeln nur die Layout-Eigenschaften betreffen, wie zum Beispiel die Positionierung, die Abstände oder die Rahmenbreite. Es fehlen Theme-Styles, wie zum Beispiel die Hintergrund- oder Rahmen-Farbe:
.ui-tabs { padding: .2em; zoom: 1; } .ui-tabs .ui-tabs-nav { list-style: none; position: relative;
padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { position: relative; float: left;
border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; } .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none;
padding: .5em 1em; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px;
border-bottom-width: 0; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs- selected a { cursor: pointer; } /* first selector in group seems
obsolete, but required to overcome bug in Opera applying cursor: text overall
if defined elsewhere... */ .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0;
background: none; } .ui-tabs .ui-tabs-hide { display: none !important; }
    ----
    Note
    Ihr Theme-Stylesheet wird die Style-Regeln für
ui-tabs
nur enthalten, wenn Sie auch das Tabs-Plugin heruntergeladen haben.
    ----
    Schritt 2. Erstellen eines Override-Stylesheets
    Wir haben festgestellt, dass sich das Erscheinungsbild eines Widgets am besten im Detail anpassen lässt, indem man neue Style-Regeln schreibt, die die Theme-Styles von jQuery UI überschreiben, und diese »Override-Regeln« in einem eigenen Stylesheet zusammenfasst. Override-Regeln werden für jQuery UI CSS-Klassennamen geschrieben und müssen daher auf Ihrer Seite nach dem Theme-Stylesheet eingebunden werden . Da Styles in der angegebenen Reihenfolge eingelesen werden, »gewinnt« immer die letzte Style-Regel.
    Die jQuery UI-Bibliothek entwickelt sich immer weiter und sie enthält immer mehr Features mit immer saubererem Code. Indem Sie die Override-Styles in einer eigenen Datei verwalten, können Sie die Widget-Styles wie gewünscht anpassen, aber trotzdem die jQuery UI-Dateien nach Bedarf aktualisieren, ohne die eigenen Regeln zu verlieren. Die Override-Regeln lassen sich in einem eigenen Stylesheet zusammenfassen, mit denen die Standard-Theme-Styles überschrieben werden, oder sie werden an das Haupt-Stylesheet für Ihr gesamtes Projekt gehängt, um die Anzahl der Dateien (und damit auch die Anzahl der Anfragen an den Server) zu begrenzen, die von Ihren Seiten eingebunden werden.
    In diesem Rezept werden wir die Override-Styles an das Haupt-Stylesheet
travel.css
für unser Projekt anhängen – direkt unter den eigenen Styles, die wir für unsere Anwendung entwickelt haben:
/* ----- EIGENE STYLES für die Reise-Anwendung */
body { font-size: 62.5%; }
fieldset { padding: 0 0 1.5em; margin: 0 0 1.5em; border: 0; }
p, label { padding: 0 0 .5em; margin: 0; line-height: 1.3; }
p label { display: block; }
... /* ----- OVERRIDE-REGELN für die jQuery UI-Widgets */ /* tabs background styles go here */
...
    Außerdem werden wir
travel.css
nach dem Theme-Stylesheet auf unserer Seite referenzieren:



    
    

    
    

    
    < link rel="stylesheet" type="text/css" href="css/travel.css" />
....
    Schritt 3. Die Style-Regeln im Override-Stylesheet bearbeiten
    Nachdem wir uns angeschaut haben, wie die Widget-Klassen benannt und zugewiesen werden, und nachdem wir auch wissen, wie wir in unserem Projekt Override-Styles referenzieren, wollen wir unsere Reise-Reservierungs-Anwendung mit unserer eigenen Navigation Bar für die Registerkarten und dem