JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

hexadezimalen Wert
#FFFFFF
ein.
Klicken Sie auf das Texture-Symbol neben dem Feld für die Hintergrundfarbe und wählen Sie die erste Option »flat«. (Wenn Sie die Maus über die Textur-Bilder bewegen, werden die Namen angezeigt.) Dadurch wird das Hintergrundbild entfernt, so dass der Style nur für einen schlichten weißen Hintergrund sorgt.
Setzen Sie die Opazität für den Hintergrund auf 100%, damit der Header komplett »blickdicht« ist.
Die Textfarbe ist noch weiß, was sich auf einem weißen Hintergrund nicht so gut macht. Ändern wir sie also in ein dunklen Grau, das dem des anklickbaren Status entspricht:
#333333
.
Ändern Sie schließlich noch die Farben für den Rahmen und die Symbole in
#EDAA12
und die Textfarbe in weiß (
#FFFFFF
).
Die Rahmenfarbe des Containers auf gelb setzen : Die Rahmen von Inhaltsbereichen werden um Akkordeon-Abschnitte gezeichnet und sie definieren die Container von Registerkarten, Dialogen, Slidern, Datepickern und Fortschrittsbalken. In unserem Design soll der Rahmen das gleiche Hellgelb erhalten, das wir für den Rahmen des Headers genutzt haben:
    Öffnen Sie den Abschnitt »Content«.
Wechseln Sie in das Feld für die Rahmenfarbe und geben Sie den Wert
#EDAA12
ein.
Die Rahmenfarbe für »aktive« Bereiche mit der des Containers abstimmen : Nach dem Aktualisieren der Rahmenfarbe des Containers wird Ihnen auffallen, dass der ausgewählte Abschnitt im Akkordeon und die gewählte Registerkarte immer noch einen grauen Rahmen haben. Diese Farbe wird durch die Klasse für den aktiven anklickbaren Style gesetzt:
    Öffnen Sie den Abschnitt »Clickable: active state«.
Wechseln Sie in das Feld für die Rahmenfarbe und geben Sie den Wert
#EDAA12
ein.
    ----
    Note
    Sie können ein Theme jederzeit »speichern«, indem Sie einfach ein Lesezeichen auf die Seite einrichten. ThemeRoller aktualisiert die URL immer dann mit allen relevanten Style-Daten, wenn der Vorschau-Abschnitt aktualisiert wird. Legen Sie Lesezeichen für Ihr eigenes Theme an – legen Sie sogar Lesezeichen für eine Reihe von Themes an, um sie vergleichen zu können – und laden Sie das Theme dann über das Lesezeichen, um es anzupassen und zu verbessern, bevor Sie es herunterladen.
    Für jedes Theme, das Sie von ThemeRoller herunterladen, enthält das Stylesheet die vollständige URL darauf. Öffnen Sie das Stylestheet (zum Beispiel
jquery-ui-1.7.1.custom.css
) und suchen Sie nach dem Kommentar, der mit den Worten »To view and modify this theme, visit http://jqueryui.com/themeroller/…« beginnt.
    ----
    Jetzt haben wir dafür gesorgt, dass unser ThemeRoller-Theme mit dem Design unserer Reisebuchungs-Anwendung so gut wie möglich übereinstimmt (siehe Figure 15-7 ). Nun können wir es herunterladen.
    Figure 15-7. Unser angepasstes ThemeRoller-Theme, das sehr nahe an unserem Design liegt
    Schritt 3. Die jQuery UI-Widgets und das Theme herunterladen
    Klicken Sie auf den Button »Download theme« direkt unterhalb der Registerkarte »Roll Your Own«. So gelangen Sie zum jQuery UI Download Builder (siehe Figure 15-8 ).
    Figure 15-8. Der jQuery Downloader fasst UI Core, alle gewählten Interaktionen und Widgets sowie Ihr Theme in einer einzelnen gezippten Datei zusammen
    In der rechten Spalte ist unter »Theme« der Eintrag »Custom Theme« schon vorausgewählt.
    ----
    Note
    Entscheiden Sie sich für eines der Standard-Themes aus der Galerie, das Sie ohne Änderungen übernehmen wollen, dann finden Sie hier auch die Namen der Themes, zum Beispiel »Smoothness«.
    ----
    Als nächstes wählen wir aus, welche Komponenten des jQuery UI wir zusammen mit unserem Theme herunterladen wollen. Standardmäßig sind alle selektiert, aber Sie können einfach die abwählen, die Sie nicht mit herunterladen wollen, oder auf »Deselect all components« am Anfang des Components-Abschnitts klicken, um nur das Theme-Stylesheet herunterzuladen. Bei unserer Reise-Reservierungs-Anwendung brauchen wir die Skripten für jQuery UI Core und die für die Registerkarten und den Datepicker.
    Schließlich wählen Sie aus, welche Version von jQuery UI Sie nutzen wollen – standardmäßig ist die letzte stabile Version selektiert. Klicken Sie auf »Download« und speichern Sie die ZIP-Datei lokal ab. Die heruntergeladene ZIP-Datei hat den Namen
jquery-ui-1.7.1.custom.zip
(oder ähnlich).
    (Der Abschnitt »Advanced Theme Settings« im Theme-Abschnitt ermöglicht es Ihnen, das Theme beim Herunterladen mit einem Scope zu versehen – wir werden das noch