原作：Using and customizing jQuery Mobile themes —— Matthew David
翻譯：filod
轉載聲明：請註明原作者、翻譯者以及譯文鏈接。
本文轉載自：http://www.cnblogs.com/yuzhongwusan/archive/2011/11/24/2261573.html
在之前的文章jQuery Mobile 入門教程裏，我對jQueryMobile的使用進行了入門介紹，你可以使用它創造出非常華麗的移動站點——漂亮的按鈕、優雅的界面等等等等。
然而僅僅是這樣的話，你的需求肯定不會被滿足的——你或許需要給header換個顏色來配合自己公司的logo？又或者需要突出顯示一下某個靜音按 鈕？總而言之，你需要自己控制jQueryMobile的顯示效果。本文旨在介紹教大家如何在jQueryMobile構建的站點中控制主題顯示的效果。
jQueryMobile的主題（theme）和調板（swatches）
很顯然，jQueryMobile是用CSS來控制在屏幕中的顯示效果的，而在CSS文檔中又包含兩個主要的部分：
- 結構：用於控制元素（如按鈕、tab等）的在屏幕中顯示的位置，內外邊距等。
- 主題：用於控制可視元素的視覺效果，例如字體、顏色、漸變、陰影、圓角等。你可以通過修改主題來控制可視元素（如按鈕）的效果。
注意：爲了儘量減少圖片的使用（目的是減少請求數），jQueryMobile使用了css3的方式來替代傳統的圖片方式創建按鈕等控件。當然用圖片來設計也可以，但這並不是推薦的。
jQueryMobile中的每一個主題都可以包含一個或多個調板。調板主要用於設置工具欄、頁面區塊、按鈕和列表的顏色。調板可以很方便的切換主題中的配色方案。
調板的設計思想是爲了快速的切換已有網站的主題，在你使用默認主題的時候，可能偶爾需要更改某一些按鈕的顏色來表示強調（如“試一試”按鈕）或者弱化（如“不關注”按鈕），這時便可以定義特定調板來完成。
jQueryMobile默認的CSS文件中包含五個調板（a、b、c、d、e），按照慣例，a是優先級最高的調板，默認爲黑色（如下圖）：
以下是默認主題所規定的五種調板和其含義：
- a：最高優先級，黑色
- b：優先級次之，藍色
- c：基準優先級，灰色
- d：可選優先級，灰白色
- e：表示強調，黃色
如何使用默認調板
jQueryMobile內建了主題控制相關模塊。調板可以使用data-theme屬性來控制。如果你不指定data-theme屬性，將默認採用a調板。以下代碼定義了一個採用默認調板的頁面：
<div data-role="page" id="page"> <div data-role="header"> <h1>Sample Page</h1> </div> <div data-role="content"> <p>I'm a sample page!</p> </div> </div>
使用不同的調板：
<div data-role="page" id="page" data-theme="e"> <div data-role="header"> <h1>Sample Page</h1> </div> <div data-role="content"> <p>I'm a sample page!</p> </div> </div>
從代碼結構上看是一樣的，僅僅使用一個data-theme="e"便可以將整個頁面切換爲黃色色調：
默認情況下頁面上所有的控件都會繼承page上設置的調板，這意味着你只需設置一次便可以更改整個page：
<div data-role="page" id="page" data-theme="e">
當然你也可以獨立設置不同元素的調板，同樣設置元素的data-theme屬性來實現：
<div data-role="page" id="page"> <div data-role="header" data-theme="c"> <h1>Header</h1> </div> <div data-role="content" data-theme="d"> <p>Content</p> <p> </p> <ul data-role="listview" data-theme="b"> <li><a href="#page1">Page 1</a></li> </ul> <div data-role="collapsible-set"> <div data-role="collapsible" data-theme="b"> <h3>Header</h3> <p>Content</p> </div> <div data-role="collapsible" data-collapsed="true" data-theme="a"> <h3>Header</h3> <p>Content</p> </div> <div data-role="collapsible" data-collapsed="true" data-theme="e"> <h3>Header</h3> <p>Content</p> </div> </div> </p> <p> <a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="e">Go To Page 4</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div>
創建自己的主題
只是添加一個data-theme屬性，改改HTML代碼肯定不能使你滿足，修改CSS代碼可以讓你控制更多的可視效果：邊框、位置、邊距等等。jQueryMobile的css代碼定義在jquery.mobile-1.0b1.css文件中。
注意：當前版本的css文件是beta 1版本（譯註：截止到譯文發佈時，jQueryMobile版本爲beta 2），最終版本肯定會更改此文件。所以你要注意在版本更新後替換你修改過的文件名。
在這裏下載jQueryMobile的文件後，讓我們開始準備編輯css文件吧！像本文之前說的，css文件定義了主題和結構兩部分。在主題部分定義了五個默認的主題。
編輯調板
所有調板幾乎都是一樣的代碼結構，每種調板前面都有註釋指明瞭它是哪種調板，比如以下是a調板的部分代碼：
/* A -----------------------------------------------------------------------------------------------------------*/ .ui-bar-a { border: 1px solid #2A2A2A; background:#111111; color:#ffffff; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -moz-linear-gradient(top, #3c3c3c, #111111); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111111)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }
可以看到類名（ui-bar-a)有着特定的結構，後綴（a）指明瞭其所屬調板，類ui-bar則控制着footer和header的顯示。由於並 沒有使用圖片，因此該類依賴於css3的文本陰影、漸變等效果。同理，b調板的類名爲ui-bar-b。驚喜的是，你可以創建你自己的調板，並命名爲類似 ui-bar-x的結構即可（下文詳述）。
如果你直接引用你自己服務器上的css文件，你可以直接在原始文件上修改（當然，最好還是留下一個備份），下例就將默認a調板中的文字顏色修改成了紅色：
.ui-bar-a { border: 1px solid #2A2A2A; background:#111111; color:red; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -moz-linear-gradient(top, #3c3c3c, #111111); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111111)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }
修改其他樣式
css文件的前600行（譯註：新版是566行）都是定義五種調板的，其餘的代碼用來定義一些通用特性，比如按鈕的圓角等。下例是圓角相關的css代碼：
.ui-btn-corner-tl { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius:1em; border-top-left-radius:1em; } .ui-btn-corner-tr { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius:1em; border-top-right-radius:1em; } .ui-btn-corner-bl { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; } .ui-btn-corner-br { -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-top { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius:1em; border-top-left-radius:1em; -moz-border-radius-topright: 1em; -webkit-border-top-right-radius:1em; border-top-right-radius:1em; } .ui-btn-corner-bottom { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-right { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius:1em; border-top-right-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-left { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius:1em; border-top-left-radius:1em; -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; } .ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
這些class都是通用的，他們不依賴於特定的調板，每一個class都控制一個特定類型的圓角，由於瀏覽器對CSS3支持的不一致導致了每一個class裏面都寫有三行表示相同含義的代碼。
css文件裏包含許多class，你可以按需修改它們。
完成更改！
當你準備創建自己的主題時，我還是建議你對原始主題進行備份。修改css如下幾步即可：
- 打開jquery.mobile-1.0b1.css，另存爲其他名字，例如：jquery.mobile.theme.css。
- 修改新建的文件，比如修改上面說到的圓角值。
- 保存。
- 在你的HTML頁面中，修改對樣式文件的引用鏈接。
如何測試，將在下文詳述。
如何創建自定義調板
jQueryMobile默認的主題各方面都非常好，唯一我想更改的就是調板。
要更改調板你有兩個選擇。一是像上文所訴的那樣修改原始的文件，這樣可能導致你的代碼不易管理——尤其在jQuery更新版本的時候。
第二個選擇是充分利用CSS的擴展性僅創建獨立的調板文件，這樣做可以不用修改原始的jQueryMobile文件，你的文件也更容易維護。
如何創建獨立的調板文件
以下步驟展示瞭如何創建新的調板：
- 創建一個新的css文件，名爲jquery.mobile.swatch.i.css。
- 將原始css文件中a調板的代碼複製進去。（16到149行）
- 粘貼到你的文件中。
- 更改每一個class的名字中的後綴，比如將ui-bar-a更改爲ui-bar-i.
- 當然還是保存啦。
修改具體的樣式
現在你可以開始修改具體的css代碼了。當然，你可以更改任何你想更改的代碼，以下例子中將更改按鈕的背景，涉及到的class有：
- .ui-btn-up-i
- .ui-btn-hover-i
- .ui-btn-down-i
可以看到代碼組織結構都是相同的，原始的.ui-btn-down-i代碼如下：
.ui-btn-down-i { border: 1px solid #000; background: #3d3d3d; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #333333, #5a5a5a); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #333333), color-stop(1, #5a5a5a)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')"; }
每一個按鈕都採用了漸變的背景，如需修改顏色，請修改包含background, background-image, 和 -ms-filter屬性的值。對於background-image 和-ms-filter屬性而言，你需要設置漸變色的開始值和結束值，例如從淺綠（66FF79）漸變到深綠（00BA19）：
.ui-btn-down-i { border: 1px solid #000; background:#00BA19; font-weight: bold; color:#fff; text-shadow: 0 -1px 1px #000; background-image: -moz-linear-gradient(top, #66FF79, #00BA19); background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #66FF79),color-stop(1,#00BA19)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#66FF79', EndColorStr='#00BA19')"; }
因爲不同的瀏覽器使用不同的機制來處理漸變，你需要在三個地方修改代碼。這本例中第第一個background- image屬性是Firefox瀏覽器專屬的，第二個則是webkit內核瀏覽器專屬（safari或者chrome），-ms-filter自然就就是 微軟的IE了。儘管語法有點各自爲政，但基本還是有着同樣的模式：均包含開始色和結束色。
每個調板都包含20多個class可以修改，你無須全部更改它們。在大多數情況下只需修改你想要修改的部分就可以了。
jQueryMobile一個特別大的優勢就是它僅使用css來控制顯示效果，這使得你可以最大程度上靈活控制你網站的顯示。舉例來說，本文附件中包含的f調板 (jquery-mobile-swatch-f.css)使用@font-face在頁面中嵌入了許多字體。
如何使用新的調板
每一個主題只能有26個調板（a-z），要使用他們只需要鏈接到你的頁面就行了，下例展示瞭如何使用兩個自定義調板：
<link rel="stylesheet" type="text/css" href=" jquery.mobile-1.0b1.css "/> <link rel="stylesheet" type="text/css" href="jquery-mobile-swatch-i.css"/> <link rel="stylesheet" type="text/css" href="jquery-mobile-swatch-r.css"/>
然後你需要做的就是使用data-theme屬性：
<div data-role="page" id="page"> <div data-role="header" data-theme="r"> <h1>Header</h1> </div> <div data-role="content" data-theme="i"> <p>Content</p> <p> </p> <div data-role="collapsible-set"> <div data-role="collapsible" data-theme="i"> <h3>Header</h3> <p>Content</p> </div> <div data-role="collapsible" data-collapsed="true" data-theme="i"> <h3>Header</h3> <p >Content</p> </div> <div data-role="collapsible" data-collapsed="true" data-theme="i"> <h3>Header</h3> <p>Content</p> </div> </div> </p> <p> <a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="i">Go To Page 4</a></p> </div> <div data-role="footer" data-theme="r"> <h4>Footer</h4> </div> </div>
開發中的主題編輯器（ThemeRoller）
現目前我們修改jQueryMobile主題還都只能侷限於修改css文件，幸運的是jQueryMobile團隊正致力於開發jQueryMobile的可視化主題編輯器。根據官方網站的說法，此編輯器將於2011年jQueryMobile1.0正式發佈時隨同發佈。
jQueryUI項目所包含的主題編輯器可以讓你輕易創建自定義主題，而jQueryMobile項目的主題編輯器將會更加高效。
當然，主題編輯器會帶來巨大的方便，但是我仍然建議你試着手寫css代碼來創建主題，這樣能使你更好的理解jQueryMobile的主題系統是如何工作的。
最後一步，測試你的主題
上面介紹了這麼多技術，相信你也是躍躍欲試了，如果有條件的話我建議你使用Dreamweaver來替代普通的文本編輯器，這樣能使你更高效的編輯和而管理你的文件。
如果你有自己的web服務器，你可以託管你的文件上去，否則你只能直接在你的移動設備上打開你的網站。在電腦上本地測試時我建議你使用chrome來打開你的網站。
以下展示了主題修改的完整步驟：
- 依然是在官網下載相關文件。
- 解壓到你網站目錄下。
- 新建一個HTML文件，名爲test.html，並複製以下代碼：
<!DOCTYPE html /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b1.css"/> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header" data-theme="e"> <h1>Sample Page</h1> </div> <div data-role="content"> <p>I'm a sample page!</p> </div> <a href="#page2" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="e">Button</a> </div> </body> </html>
上面代碼中第一行是HTML5的文檔聲明，老舊的瀏覽器將會忽略它。
head元素中引用了jQueryMobile的三個核心文件：<link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b1.css"/> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
其中，第一行是本地的css文件，當然，如果你不需要更改樣式的話你也可以使用jQuery官網提供的cdn。二三兩行鏈接到jQuery和jQueryMobile的js文件——來自CDN。
body元素包含了屏幕中將被顯示的內容。使用了header、footer、list等組件，更多詳情請參見[翻譯]jQuery Mobile 入門教程。 - 保存，現在可以在chrome中或者你的移動設備中查看你的頁面了。
- 備份jquery.mobile-1.0b1.css文件，修改新的文件名爲jquery.mobile.theme.css。
- 打開此文件，找到.ui-bar-e這個class，修改color值爲red：
color: red; - 移除原來對jquery.mobile-1.0b1.css的引用，替換成下面的：
<link rel="stylesheet" type="text/css" href="jquery.mobile.theme.css"/>
- 保存，並刷新瀏覽器，現在header中的文字應該已經變爲紅色的了。
現在你可以按照前文所述步驟創建獨立的調板文件來試試。 - 編輯test.html，引用jquery-mobile-i.css文件：
<link rel="stylesheet" type="text/css" href="jquery-mobile-i.css"/>
- 把data-theme的值由e改爲i：
<a href="#page4" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="i">Button</a>
- 保存並刷新頁面，現在按鈕點擊時已經會變綠了。
接下來呢？
css相關知識對創建jQueryMobile主題是非常有幫助的。http://www.css3.info/包含許多 css3的知識，快速學習css3相關屬性可以參考printable cheat sheet from Smashing Magazine。
有關jQueryMobile主題的更多細節可以參考jQuery themes page。