Einleitung
Einer der Vorteile von jQuery UI besteht in der einfachen Integration in viele verschiedene Arten von Websites und Anwendungen. Dazu gehört vor allem die Möglichkeit, den jQuery UI-Widgets ein »Look and Feel« zu verpassen, das zu dem der gesamten Site oder dem System passt.
jQuery UI ist mit Bedacht so entworfen, dass das Erstellen eigener Themes einfach ist. Sie können für Ihre Widgets selbst entworfene Styles erstellen – wozu nicht nur Farben und Texturen, sondern alle möglichen Interaktions-Formen gehören, indem Sie folgende Elemente nutzen:
- jQuery UI CSS Framework, eine umfassende Sammlung von CSS-Klassen, mit denen konsistent Styles und Verhaltensweise für alle Widgets zugewiesen werden können
- ThemeRoller, das jQuery UI-Tool zum Erstellen von Themes
Zusammen bieten sie die Möglichkeit, das Look and Feel von offiziellen jQuery UI-Widgets und selbst gebauten Komponenten einfach und konsistent zu ändern, so dass sie zu Ihrer Site oder Anwendung passen.
Dieses Kapitel konzentriert sich darauf, Ihnen zu zeigen, wie Sie diese Tools sinnvoll nutzen können – egal ob Sie damit ein offizielles jQuery UI-Widget konfigurieren oder Ihre eigenen Entwicklungen beeinflussen wollen. Wir beginnen mit einem Überblick über das jQuery UI CSS und die Arbeit mit ThemeRoller, dann stellen wir vier Rezepte zum Thema Theming vor:
- Anpassen des Styles von jQuery UI-Widgets mit ThemeRoller
- Überschreiben des Layouts und der Theme Styles von jQuery UI
- Anwenden eines ThemeRoller-Themes auf eigene Komponenten
- Mehrere Themes auf einer Seite verwenden
Jedes Rezept beginnt mit einem einfachen Beispiel-Designproblem, auf das nach und nach verschiedene Techniken angewendet werden, um das Theme anzupassen. Aus diesem Grund werden Sie in diesem Kapitel immer wieder Verweise auf andere Rezepte finden.
Bevor wir uns mit dem Anpassen der Widget-Styles befassen, ist es wichtig, ein Verständnis dafür zu bekommen, wie die jQuery UI-Klassen strukturiert sind und wie sie mit ThemeRoller zusammenarbeiten.
Die Komponenten von jQuery UI CSS verstehen
Unser wichtigstes Ziel beim Erstellen des jQuery UI CSS war das Vereinfachen des Setup-Prozesses, so dass Entwickler Widgets schnell und problemlos in ihrem Code veröffentlichen können, ohne sich mit komplexem Markup oder CSS herumschlagen zu müssen.
Beim Integrieren von fremden JavaScript-Widgets in unseren eigenen Projekten erforderte das Anpassen des Erscheinungsbildes der Fremd-Widgets einen größeren Aufwand als das korrekte Aufsetzen des Codes, um alles richtig auszuführen. Anders als die Skripten, die durchaus dazu gedacht waren, angepasst zu werden – Skripten für die Kernbestandteile der Bibliothek und die Widgets kümmern sich im Hintergrund um sehr komplexe Aufgaben und lassen sich oft schnell konfigurierbar gestalten – fanden sich die Styles der Widgets im Allgemeinen in einer einzelnen Klasse oder sie waren gar mit dem Markup verwoben. Wir mussten Klassen im Markup erkennen und deren Style-Regeln »zurückrechnen«, bevor wir sie anpassen konnten. Das kostete oft viele Stunden Suchen im Code und in den CSS-Definitionen mit Hilfe von Firebug, um die genutzten Klassen zu erkennen oder um Inline-Styles zu finden, um Hintergrundbilder herauszusuchen und dann die Style-Regeln zu ersetzen oder die Klassen im Markup so anzupassen, dass sie ungefähr dem Design unseres Projekts entsprachen. (Und das ging überhaupt nur dann, wenn Code und CSS halbwegs organisiert und konsistent waren.)
Wir fanden das rückständig. Es wäre doch viel einfacher, einem größtenteils Style-freien Widget ein eigenes Look and Feel hinzuzufügen, anstatt den CSS-Code für ein fertig designtes Widget auseinanderzupflücken und herauszufinden, welche Regeln problemlos ersetzt werden können. Wir entschieden uns, eine bessere Möglichkeit zum konsistenten Anwenden von Styles zu entwickeln, so dass diese auf eine ganze Gruppe von Widgets und auf einer größeren Site oder in einem System angewendet werden können.
Um dieses Problem für jQuery UI zu entwickeln, teilten wir jQuery UI CSS in logische Komponenten auf – ähnlich der Strukturierung der Skripten – und trennten die Style-Bestandteile, die für die korrekte Funktion eines Widgets notwendig sind (Positionierung, Gleit-Status und Abstände) von den konfigurierbaren Theme-Styles (Farben und Hintergrundbilder). So sind die Klassen, die Entwickler verändern können, um die Widgets an ihr Projekt anzupassen, in zwei grundlegende Kategorien unterteilt:
- Widget-spezifische Klassen enthalten alle Styles, die für das
Format einer bestimmten Widget-Struktur und des Layouts notwendig
sind. Dazu gehören unter anderem die Positionierung, Abstände und
Dimensionen sowie andere Layout-bezogene Styles, die für eine
korrekte Funktionalität wichtig sind. So enthalten zum Beispiel
Widget-Klassen für die Registerkarten Styles, die die Tabs so
arrangieren, dass sie in einer horizontalen Zeile aufeinanderfolgen
und die Inhaltsbereiche entsprechend ausblenden.
Widget-spezifische Klassen finden sich im CSS-Code, den Sie beim Herunterladen eines oder mehrerer jQuery UI-Widgets erhalten (in Themes für jQuery UI-Widgets mit ThemeRoller erstellen erfahren Sie, wie Sie jQuery UI CSS herunterladen und referenzieren können). Klassen sind nach dem entsprechenden Widget benannt und die Namen beginnen immer mit dem Präfixui-[widgetname], zum Beispiel alsoui-tabs. - Framework-Klassen sorgen für ein angepasstes Look and
Feel mit Hilfe eines Themes. Dazu gehören eine grundlegende
Schriftart, Hintergrundfarben und -texturen, Schrift- und
Symbolfarben, Form-Parameter (zum Beispiel der Radius der
abgerundeten Ecken) und die Status-Rückmeldungen – für alle
Widgets. Framework-Klassen sind nach ihrem Anwendungszweck benannt
– zum Beispiel sind manche für die Status-Rückmeldung gedacht
(
ui-state-default,ui-state-hover), andere für abgerundete Ecken (ui-corner-all,ui-corner-top) – und sie sollen auf einer ganzen Website oder in einer Anwendung genutzt werden. Tatsächlich können sie auf jedes beliebige Widgets angewendet werden – auf solche, die von jQuery UI, von einer anderen JavaScript-Bibliothek oder von Ihnen selbst erzeugt wurden.
In der Praxis versehen wir jQuery UI-Widgets mit Styles, indem wir ihnen eine Kombination dieser Klassen zuweisen – eine oder mehrere Widget-spezifische Klassen und eine Reihe von generischen Framework-Klassen – die gemeinsam für das Erscheinungsbild sorgen. Schauen Sie sich zum Beispiel das Markup für den Akkordeon-Header an:
<h3 class="ui-accordion-header ui-state-active ui-corner-top">code</h3>
Es werden drei Klassen zugewiesen, die jeweils bestimmte Styles mitbringen:
ui-accordion-headerist eine Widget-spezifische Klasse, die nur für diese Komponente genutzt wird. Sie legt strukturelle Style-Regeln fest (Position, Dimensionen, Ränder, Abstände), enthält aber keine Farben oder Bilder.ui-state-activeist eine Framework-Klasse, die die Theme-Farbe und die Hintergrundbilder enthält, welche den Status anzeigen.ui-corner-topist eine weitere Framework-Klasse, die festlegt, dass der Header abgerundete obere Ecken haben soll.
Auch wenn durch dieses Vorgehen einigen Elementen mehrere Klassen zugewiesen werden, ist es doch ein machtvolles System, durch das sich sehr einfach schlanke Themes auf beliebig viele Widgets und sogar auf Ihre eigenen Komponenten anwenden lassen. Die sorgfältige Trennung der Struktur-Styles vom Theme sorgt auch dafür, dass Sie jederzeit ein neues Theme nutzen können, ohne sich Sorgen machen zu müssen, dass Ihre bestehenden Widgets nicht mehr funktionieren.
Wir wollten es auch einfach machen, ein neues Look and Feel zu erstellen oder ein bestehendes Design genau abbilden zu können, ohne umfassende Kenntnisse in CSS oder in Bildbearbeitungstools wie Adobe Photoshop haben zu müssen. ThemeRoller ermöglicht es Entwicklern, Style-Regeln zu bearbeiten, die von den Framework-Klassen definiert werden, ohne dass sie den CSS-Code anfassen oder selbst Bilder erzeugen müssen.
ThemeRoller ist eine Web-Anwendung mit einer intuitiven und unkomplizierten Oberfläche, um eigene Themes für jQuery UI zu entwerfen und herunterzuladen. Mit ThemeRoller können Sie die folgenden Theme-Styles anpassen:
- Basis-Schriftart für alle Widgets: Die Basis-Schriftart gibt einen Schriftschnitt, eine Größe und einen Style vor (normal oder fett), der in allen Widgets im Theme genutzt wird. Standardmäßig wird die Schriftgröße in »em«-Einheiten angegeben. Wir empfehlen, ems anstatt Pixel zu nutzen, damit der Text zusammen mit den Widget-Containern wachsen kann, wenn der Anwender die Schriftgröße im Browser verändert. Sie können aber auch Pixel nutzen. Wie bei Standard-CSS ist es sinnvoll, mehrere Schriftarten anzugeben, falls Ihre erste Wahl nicht auf dem Rechner eines Anwenders installiert ist. Die letzte Schriftart sollte eine generische sein, wie zum Beispiel »serif« oder »sans-serif«.
- Eckradius: Ein Eckradius kann konsistent auf alle Widgets im Theme angewendet werden, um ihnen ein abgerundetes Erscheinungsbild zu verpassen. Jeder Radiuswert muss eine Einheit enthalten: Pixel für einen festen Radius, ems für einen Radius, der auf die Änderung der Textgröße reagieren soll, oder Null für »richtig« eckige Ecken. Kleinere Werte lassen die Ecken eckiger sein, größere Werte sorgen für runde Ecken.
Note
Während dieses Buch entsteht, werden Angaben für Ecken in CSS3, wie wir sie im Framework vornehmen, in einigen aktuellen Browsern nicht unterstützt, unter anderem im Internet Explorer. Im Kasten in Themes für jQuery UI-Widgets mit ThemeRoller erstellen erfahren Sie, wie auch in diesen Browsern abgerundete Ecken genutzt werden können.
- Header, Toolbars und Content-Bereiche: Jeder dieser drei Bereiche setzt eine Hintergrundfarbe mit einer semitransparenten Textur und Farben für Rahmen, Text und Symbole. So wird zum Beispiel der Header-Style für die Titelzeile eines Dialogs oder eines Datepickers und den selektierten Bereich eines Sliders oder Fortschrittsbalkens genutzt, während der Content-Style für den Content-Bereich eines selektierten Akkordeons oder einer Registerkarte verwendet wird.
- Standard-, aktive und
Hover-Styles für anklickbare Elemente: Es gibt drei Styles,
die die verschiedenen Zustände bei der Benutzer-Interaktion
repräsentieren:
defaultist der Standard-Status für anklickbare Elemente,hoverwird genutzt, um deutlich zu machen, dass der Mauscursor über das Element bewegt wird, undactivewird verwendet, wenn das Element gerade selektiert ist. Jeder Status eines anklickbaren Elements wird durch eine Hintergrundfarbe mit einer semitransparenten Textur und durch Farben für Rahmen, Text und Symbole definiert. Denken Sie daran, dass sich jeder Status ausreichend von den anderen unterscheiden sollte, um dem Anwender eine deutliche Rückmeldung geben zu können. - Styles zum Hervorheben und für Fehler: Dies sind spezielle Styles für die Kommunikation von Zuständen in einem System. Der Highlight-Style wird für Textmeldungen genutzt, die ein Anwender lesen sollte, und für das aktuelle Datum im Kalender-Widget. Zudem ist es nützlich, damit deutlich zu machen, dass der Bildschirm durch Ajax aktualisiert wurde. Der Fehler-Style kann genutzt werden, um darauf hinzuweisen, dass es ein Problem gibt, auf das der Anwender reagieren sollte – zum Beispiel ein Problem beim Überprüfen einer Form oder bei der Benachrichtigung des Anwenders über einen Systemfehler. Beide Styles definieren eine Hintergrundfarbe mit einer semitransparenten Textur und Farben für Rahmen, Text und Symbole. Diese Styles sollten einen deutlichen Kontrast zum normalen Text und zu den Hintergrundfarben bilden, die Sie in Ihrem Theme nutzen. Zudem sollten sie sich auch voeinander unterscheiden, so dass klar ist, welche nur auf sich aufmerksam machen sollen und welche für Fehler und System-Meldungen stehen.
- Modaler Screen für
Overlays: Der modale Screen ist ein Layer, der zwischen
einem modalen Dialog und dem Seiteninhalt darunter liegt. Er wird
normalerweise dafür verwendet, den Seiteninhalt zwischenzeitlich
als deaktiviert erscheinen zu lassen, während das modale Fenster
angezeigt wird. Dieser Style beeinflusst die normale
Hintergrundfarbe und die Opazität. Wenn Sie für ein bestimmtes
Widget keinen modalen Overlay haben möchten, können Sie das durch
die Option
modaldes Widgets beeinflussen. - Schlagschatten-Styles: Wie bei den Styles zum Hervorheben und für Fehler kann ein Schlagschatten-Style optional auf Overlays angewendet werden. Schlagschatten haben eine Hintergrundfarbe, Textur und Opazität (wie Header und anklickbare Elemente) sowie eine Schatten-Dicke, die angibt, wie weit der Schatten von der oberen linken Ecke der Komponente reichen soll, und einen Eck-Radius. Damit der Schatten gleichmäßig um alle Seiten der Komponente herum erscheint, sollten der obere und linke Offset-Wert negativ, aber gleich der Schatten-Breite sein. Wie beim normalen Eck-Radius können Sie einen Radius in Pixeln oder ems setzen oder Null angeben, um eckige Ecken zu erhalten.
Mit ThemeRoller können Sie direkt alle Styles der Framework-Klassen bearbeiten und sich anzeigen lassen, wie das Ergebnis in jQuery UI-Widgets aussieht. Wenn Sie ein Theme erstellt haben, generiert ThemeRoller automatisch den notwendigen CSS-Code und die Hintergrundbilder und packt sie zusammen. Sie laden dann einfach das Theme-Stylesheet herunter und referenzieren es in Ihrem Projekt. (Sie finden ThemeRoller im Themes-Bereich der jQuery UI-Site oder unter http://themeroller.com.)
Nachdem wir jQuery UI CSS und ThemeRoller näher erläutert haben, wollen wir uns in vier Rezepten mit dem Anpassen von Themes befassen. Als erstes beginnen wir mit dem einfachen Schritt, ein Theme zu erstellen und Widgets mit Hilfe von ThemeRoller mit Styles zu versehen (Themes für jQuery UI-Widgets mit ThemeRoller erstellen). Dann befassen wir uns mit dem etwas komplexeren Überschreiben von Framework-Klassen, um Themes noch mehr anzupassen (Layout und Theme-Styles von jQuery UI überschreiben), mit der Verwendung von Framework-Klassen in Ihrem Projekt (Ein Theme auf Komponenten anwenden, die nicht zum jQuery UI gehören) und schließlich mit der Nutzung mehrerer Themes auf einer einzelnen Seite für komplexe Oberflächen (Mehrere Themes auf einer einzelnen Seite verwenden).
Note
Für Designer und Entwickler, die daran interessiert sind, Themes für jQuery UI und eigene, mit ThemeRoller nutzbare Komponenten direkt in der Website oder Anwendung zu bearbeiten und eine Vorschau zu erhalten, haben wir ein herunterladbares ThemeRoller-Bookmarklet-Tool entwickelt. Sie finden das Tool und weitere Erläuterungen dazu unter ui.jquery.com/themeroller.