jQuery Mobile Theming
Bei den vorherigen Darstellungen und Beispielen bin ich großzügig darüber hinweg gegangen, dass einzelne Elemente in manchen Fällen ein optisch verändertes Erscheinungsbild zeigten. Daher jetzt etwas ausführlichere Information zur farblichen Gestaltung von jQuery Mobile Webseiten, zum Theming.
Das Theming System von jQuery Mobile ist dem ThemeRoller System von jQuery UI sehr ähnlich. Es gibt allerdings einen großen Unterschied, den man durchaus als Verbesserung verstehen kann: Runde Ecken, Schatten und Farbverläufe werden nicht mit Grafiken sondern mit Hilfe von CSS3 Eigenschaften festgelegt. Dadurch sind die Theme Dateien wesentlich schlanker, es sind weniger Serveranfragen erforderlich.
Das Erscheinungsbild eines Elementes einer jQuery Mobile Seite wird durch data-theme=[a-z] festgelegt. Mit einem Buchstaben aus dem Wertevorrat a-z wird ein sogenannter swatch angesprochen. So einen swatch muss man sich als eine Sammlung in sich abgestimmter CSS-Attribute vorstellen. In einer Theme-CSS-Datei können bis zu 26 swatches festgelegt werden.
Vorgaben
Das jQuery Standardpaket enthält bereits einen Theme-Abschnitt in der Datei jquery.mobile-1.2.0.css bzw. in der minimierten Fassung jquery.mobile-1.2.0.min.css. In diesem Theme-Abschnitt sind die swatches a,b,c,d,e definiert. Sie können also sofort verwendet werden. Wenn keine weiteren Angaben gemacht werden, dann verwendet jQuery Mobile swatch "a" für data-role="header" sowie data-role="footer" und swatch "c" für den Seiteninhalt. Alle Elemente eines Container-Elementes erben die data-theme-Zuweisung. Es gibt allerdings einige Ausnahmen. So gibt beispielsweise data-role="page" eine data-theme-Zuweisung nicht an darin enthaltene data-role="header" weiter.