JQuery Kochbuch (German Edition)

Radius
Zuweisen eines Eck-Radius : Zu unserem Design gehören abgerundete Ecken für den Datepicker und die Registerkarten. Sie können für die jQuery UI-Widgets in ThemeRoller einen Eck-Radius setzen, indem Sie den Abschnitt »Corner Radius« öffnen (siehe Figure 15-5 ) und einen Wert zusammen mit einer Einheit eingeben: Pixel für einen festen Radius oder ems für einen Radius, der auf die Textgröße reagiert. Kleinere Pixel-Werte sorgen dafür, dass die Ecken von Widgets »eckiger« aussehen, während größere Werte zu runderen Ecken führen. Möchte man »richtige« Ecken haben, dann setzt man der Wert auf Null.
    ----
    Note
    Während dieses Buch entsteht, können einige moderne Browser, vor allem der Internet Explorer, nicht mit der CSS3-Eigenschaft
border-radius
umgehen. Dadurch rendern sie nicht die Styles mit abgerundeten Ecken, die von den Framework-Klassen zugewiesen werden, sondern sie zeigen »normale« Ecken an. Gehören zu Ihrem Design abgerundete Ecken, die auch konsistent in allen Browsern angezeigt werden sollen, dann brauchen Sie eventuell eine JavaScript-Bibliothek wie ddRoundies, die für abgerundete Ecken sorgt.
    Wir haben in unserem Filament Group Lab ein einführendes Tutorial geschrieben, in dem erklärt wird, wie man ddRoundies in sein Projekt einbinden kann: »Achieving Rounded Corners in Internet Explorer for jQuery UI with DD_roundies« .
    ----
Die Standard-Registerkarte und Buttons grau anzeigen . Nicht selektierte Registerkarten, aber auch die Abschnittsüberschriften im Akkordeon oder die Buttons im Datepicker, sind anklickbare Elemente, denen jeweils eine Klasse zugewiesen wird, um den aktuellen Status darzustellen: »default«, »hover« oder »active«. In diesem Fall werden wir die Standard-Hintergrundfarbe von grau auf gelb ändern und die Text- und die Rahmenfarbe so anpassen, dass sie unserem Design entspricht ( Figure 15-6 ):
    Öffnen Sie den Abschnitt »Clickable: default state«.
Bringen Sie den Cursor in das Feld für die Hintergrundfarbe (es enthält einen hexadezimalen Wert, vor dem ein
#
steht) und wählen Sie als neue Farbe ein dunkles Grau aus oder geben Sie direkt einen hexadezimalen Wert ein. Hier werden wir den Wert
#333333
nutzen.
Die Textfarbe ist dunkelgrau, was vor der neuen Hintergrundfarbe kaum zu lesen ist. Daher werden wir auch die Standard-Textfarbe so anpassen, dass sie ausreichend Kontrast zum Hintergrund besitzt. Wir werden hier die Textfarbe auf
#FFFFFF
setzen.
Wie beim Text sind auch die Symbole im Header grau und müssen angepasst werden, damit sie vor dem grauen Hintergrund nicht verschwinden. Lassen Sie uns den Wert
#EEEEEE
zuweisen – eine Farbe, die die Symbole sichtbar macht, aber keinen höheren Kontrast als der Text bietet.
Schließlich wollen wir die Rahmenfarbe von Gelb in ein helles Grau ändern. Geben Sie den Wert
#D2D2D2
ein.
Drücken Sie die Tab- oder die Eingabetaste oder klicken Sie irgendwo auf die Seite, um entsprechende Änderungen in Widgets auf der rechten Seite angezeigt zu bekommen.
Den Hover-Status an die neue Farbe der Registerkarten anpassen : Der Hover-Style für anklickbare Elemente soll dann erscheinen, wenn sich Ihr Mauscursor über einer anklickbaren Komponente befindet, wie zum Beispiel einer Registerkarte, einem Akkordeon-Abschnitt oder dem Button eines Datepickers. Der Standard-Style ist schon grau, so dass wir die Hintergrund- und Textfarben des Hover-Styles anpassen werden – für den Hintergrund ein dunkleres Grau, für Text und Symbole weiß:
    Öffnen Sie den Abschnitt »Clickable: hover state«.
Geben Sie im Feld für die Hintergrundfarbe den Wert
#111111
ein.
Geben Sie für die Text- und Symbolfarbe jeweils
#FFFFFF
ein.
Lassen Sie uns auch die Rahmenfarbe an unser Design anpassen. Wir nehmen ein etwas dunkleres Grau als beim Standard-Rahmen, hier
#888888
.
    Figure 15-6. ThemeRoller-Abschnitt für »Clickable: default state«
Die Hintergrundfarbe für Registerkarten und den Datepicker auf weiß setzen : Der Header-Style wird in einer ganzen Reihe von jQuery UI-Widgets genutzt – bei Registerkarten, für den Auswahlbereich für Monat und Jahr im Datepicker und für die Navigations-Buttons, als Slider-Bereich und beim Fortschrittsbalken für den schon erledigten Abschnitt. In unserem Design soll der Header einfach einen weißen Hintergrund haben, während der Text grau ist und die Symbole ein dunkles Gelb bekommen:
    Öffnen Sie den Abschnitt »Header/Toolbar«.
Geben Sie als Hintergrundfarbe den