JQuery Kochbuch (German Edition)

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 Klassenenthalten 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äfix
ui-[widgetname]
, zum Beispiel also
ui-tabs
.
Framework-Klassensorgen 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:

code

    Es werden drei Klassen zugewiesen, die jeweils bestimmte Styles mitbringen:
    ui-accordion-header
ist 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-active
ist eine Framework-Klasse, die die Theme-Farbe und die Hintergrundbilder enthält, welche den Status anzeigen.
ui-corner-top
ist 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. ThemeRollerermö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