2015年3月8日 星期日

jQuery Mobile - Theme

jQuery Mobile以data-theme屬性設定主題 (Theme),主題分別由A到Z,稱為Swatch (色板),其中A與B為內建主題 (預設為A),C到Z為使用者自訂主題,可透過ThemeRoller設定主題中各物件的顏色、字型、圖示、陰影等。

data-theme屬性相當彈性,可置於任何data-role部份,以下範例將data-theme="a"屬性置於page部份,因此全頁之物件均為同一主題:

Back

Theme A

Setting ...
...
...
【執行結果】
以下範例將全頁主題設為B:
Back

Theme B

Setting ...
...
...
【執行結果】
亦可針對頁首、內文、頁尾或個別物件設定主題,例如:
Back

Theme

【執行結果】
除了內建主題之外,目前有以下3rd Party的主題可供使用:
  • Native Droid Theme.
  • Android Theme.
  • iOS Theme.
  • Graphite.
  • BlackBerry 10 Theme.
  • Metro Theme for Windows Phone.
  • Twitter Bootstrap jQuery Mobile Theme.
  • Flat UI Theme.
  • Square UI Theme.

Native Droid Theme

以Native Droid Theme為例,可自http://nativedroid.godesign.ch下載nativeDroid-latest.zip檔案,並將zip解壓縮至jQuery Mobile的相關目錄,為能執行Native Droid Theme,除了原有jQuery Mobile的css與js檔案之外,另需在<head></head>網頁標籤部份匯入以下Native Droid Theme之css與js檔案:
  • font-awesome.min.css
  • jquerymobile.nativedroid.css
  • jquerymobile.nativedroid.XX.css
  • jquerymobile.nativedroid.color.XXX.css
  • nativedroid.script.js
其中XX分別為light或dark,代表明亮或暗色之主題,可任選其一。XXX分別為blue, green, purple, red, yellow,代表五種不同的物件顏色,可任選其一。例如選擇暗色主題與藍色的物件顏色:
... 














...
接著需將主題設定為B,則屬性為data-theme="b":
...
【執行結果】

下圖為暗色主題與藍色的物件顏色之Native Droid Theme:
以此類推,以下範例選擇明亮主題與紅色的物件顏色:
... 














...
並將data-theme="b"屬性置於page部份:
...
【執行結果】

下圖為明亮主題與紅色的物件顏色之Native Droid Theme:
Android Theme

Android Theme是由Jonas Gehring所開發之Android主題,可自https://github.com/jjoe64/jquery-mobile-android-theme下載jquery-mobile-android-theme-master.zip檔案,並將zip解壓縮至jQuery Mobile的相關目錄,為能執行Android Theme,另需在<head></head>網頁標籤部份匯入以下Android Theme之css與js檔案,不過經過實測,目前版本與新版的jQuery Mobile 1.4.5並不相容,無法產生正常的主題效果,建議使用舊版的jQuery Mobile:
  • android-theme.css
  • jquery.mobile.android-theme.js
例如:
... 



...
Android Theme提供A到D四種不同的主題樣式,以下範例將data-theme="a"屬性置於page部份:
...
【執行結果】

下圖依序為A到D之Android Theme:
iOS Theme

iOS Theme是由Tait Brown所開發之iOS主題,可自https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme下載iOS-Inspired-jQuery-Mobile-Theme-master.zip檔案,並將zip解壓縮至jQuery Mobile的相關目錄,同時需複製iOS Theme的images目錄。

為能執行iOS Theme,另需在<head></head>網頁標籤部份匯入iOS Theme之styles.css檔案,不過經過實測,目前版本與新版的jQuery Mobile 1.4.5並不相容,無法產生正常的主題效果,建議使用舊版的jQuery Mobile。此外為能在Apple iOS正常執行,另需加入apple-mobile-web-app-capable之設定,例如:

... 



...
並將data-theme="a"屬性置於page部份:
...
【執行結果】

下圖為iOS Theme之示範:
Graphite

Graphite是由Max Lynch, Ben Sperry與Joe Nelson所開發之主題,特色是提供多種主題色彩,包括aloe, candy, melon, mint, royal, sand, slate, water共8種主題色彩。

Graphite可自http://driftyco.github.io/graphite下載graphite-1.3.1_4.zip檔案,並將zip解壓縮至jQuery Mobile的相關目錄,為能執行Android Theme,另需在<head></head>網頁標籤部份匯入jquery.mobile-1.3.1.css檔案。由於Graphite將原有的jquery.mobile-1.3.1.css檔案改為各種主題色彩對應的css檔案,因此不需使用data-theme屬性。


【執行結果】

下圖依序為aloe, candy, melon, mint, royal, sand, slate, water之Graphite Theme:
【參考資料】

[1] XAMPP:https://www.apachefriends.org
[2] jQuery Mobile:http://jquerymobile.com
[3] jQuery:http://jquery.com
[4] ThemeRoller:http://themeroller.jquerymobile.com
[5] Native Droid Theme:http://nativedroid.godesign.ch
[6] Android Theme:https://github.com/jjoe64/jquery-mobile-android-theme
[6] iOS Theme:https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme
[7] Graphite:http://driftyco.github.io/graphite

© Chia-Hui Huang

2 則留言:

  1. jQuery Mobile真好用,一下子都把做APP UI的功處理掉了…

    回覆刪除
    回覆
    1. 是啊,而且還有很多3rd Party的主題可供使用,目前還在測試中,這篇會陸續更新

      Leo

      刪除