Eigene Themes mit jQuery Mobile
Im Artikel zum Theming habe ich bereits die Grundlagen der Verwendung von Themes mit jQuery Mobile erklärt. Hier möchte ich kurz darstellen, wie man vorgehen muss, wenn man eigene Themes verwenden will.
ThemeRoller für jQuery Mobile
Zunächst erstellt man mit dem ThemeRoller für jQuery Mobile (bitte nicht Verwechseln mit dem ThemeRoller für jQuery UI) ein Theme mit einem oder mehreren swatches mit dem gewünschten Aussehen. Dabei sollte man darauf achten, nicht mehr swtaches zu erstellen, als man benötigt. Sobald man damit fertig ist, lädt man die CSS-Datei auf den PC. Der ThemeRoller speichert das Theme unter eine festgelegten URI, die 30 Tage gültig ist. Solange kann man durch Aufruf der URI Nachbearbeitungen am Theme vornehmen (einzelnen swatches korrigieren, neue hinzufügen, andere löschen). Ansonsten kann man im ThemeRoller auch fertige Themes importieren.
Einbau des eigenen Themes
Bei allen bisherigen Beispielen habe ich die Standarddatei jquery.mobile-1.2.0.css (bzw. die minimierte Version jquery.mobile-1.2.0.min.css verwendet. Diese Datei enthält 6 Standardswatches. Wenn man diese swatches nicht mehr benötig, so sollte man die wesentlich kleinere Datei jquery.mobile.structure-1.2.0.css bzw. deren minimierte Version einbinden. Zusätzlich muss dann natürlich die CSS-Datei mit den eigenen swatches verwendet werden. In meinem Beispiel sieht das so aus:
<link rel="stylesheet" href="/templates/jqm-1.2.0/jquery.mobile.structure-1.2.0.css" /> <link rel="stylesheet" href="/templates/jqm-1.2.0/theme-violet.css" />
Wie ich bereits im ersten Beitrag zum Theming beschrieben habe, gibt es einige Voreinstellungen zu den verwendeten swatches. Da mein Theme nur ein swatch enthält, musste ich diese Vorgaben überschreiben, z.B. bei:
<div data-role="page" id="seite1" data-theme="a">oder bei
<ul data-role="listview" data-theme="a">
Ansonsten habe ich Code aus anderen Beispielen verwendet, so dass sich eine ausführliche Besprechung und Dokumentation des Quellcodes an dieser Stelle erübrigt.