jQuery Mobile(2)-顏色與樣式設計

jQuery Mobile 是建立在 HTML5 與 jQuery 之上的 API,它把行動裝置(尤其是手機)習慣使用的介面都設計好,讓程式設計師只要在 tag 中設定簡單的參數就可以套用。預設樣式的版本只有 5 種基礎顏色,可以用官方提供的 ThemeRoller tool 來調整。

資料來源:跨裝置網頁設計jQuery Mobile Demos

預設顏色樣式

想要美化 jQuery Mobile 的介面,只需要在原本的 tag 裡加上相對應的屬性即可。預設顏色樣式可以分成”背景”與”物件”兩種(content 套用 data-theme 時屬於背景)。套用顏色是使用「data-theme」屬性,表示此物件使用那一種樣式。每一種樣式都使用英文字母 a-z 來表示,預設樣式則只有 a-e,所代表的背景與物件顏色如下圖。

在 page 中還可以設定「data-content-theme」,表示 page 裡面的物件預設要套用那一種樣式。不過由於對 page 來說,content 也是裡面其中一個物件,所以 content 的背景也會套用 data-content-theme。參考下面的程式碼,第 1 行設定 page 的 data-theme=“a”,data-content-theme=“e”。第 3 行的按鈕沒有設定任何樣式,第 4 行按鈕則設定樣式為 b。執行結果如下圖,兩個按鈕的顏色不一樣,content 內外的顏色也會不一樣。


自訂顏色樣式

如果想要修改預設的樣式顏色,可以到官方的 ThemeRoller tool 網站來製作個人化的樣式表。設定的方式很簡單,首先左上角可以切換”全域樣式”與”各別樣式”的設定,一開始只有 a-c 的樣式,可以按「+」新增或是選「Delete」刪除沒有使用到的樣式,下面各種屬性都可以展開做調整。網頁上面的色票可以直接”拖”到下面的區塊中,直接做視覺化的調整。

設定好之後就點上方的「Download」,輸入你的佈景名稱(Theme Name),再按「Download Zip」完成下載動作。壓縮檔裡面會有一個成功套用 a 樣式的網頁給你看,並且恭喜你能夠成功的使用自訂樣式。接下來請你將 themes 資料夾裡面的「佈景名稱.min.css」與「jquery.mobile.icons.min.css」複製到網站中,並且在網頁 head 裡加入載入 css 的語法。之後要套用這些自訂樣式,一樣是使用「data-theme」屬性,它會覆蓋系統預設的樣式。




預設圖示

jQuery Mobile 有提供許多按鈕的圖示,可以使用「data-icon」套用在各種按鈕上。預設的圖示與名稱如下圖:

除此之外,還可以透過「data-iconpos」屬性設定圖示的位置。其屬性值包括:left(左)、right(右)、top(上)、bottom(下)、notext(無文字)

自訂圖示

除了預設提供的圖示外,我們也可以自訂圖示。自訂圖示一般來說是 18x18,但由於近年來解析度越來越高,建議使用 36x36。使用自定圖示的方式很簡單,首先在網頁加入自訂的CSS設定(如下),之後在按鈕中加入 data-icon=“ui-icon-appname-iconname” 即可。

.ui-icon-appname-iconname {
    background-image:url(圖示檔位置);
    background-size:18px 18px;
}