[翻譯]jQuery Mobile入門教程——主題的使用和定製

原作：Using and customizing jQuery Mobile themes —— Matthew David

翻譯：filod

譯文鏈接：http://www.cnblogs.com/filod/archive/2011/08/21/2147960.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>&nbsp;    </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>&nbsp;<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>&nbsp;    </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>&nbsp;<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>

保存並刷新頁面，現在按鈕點擊時已經會變綠了。

z040145

發佈了33 篇原創文章 · 獲贊 8 · 訪問量 8萬+

私信關注

[翻譯]jQuery Mobile入門教程——主題的使用和定製

jQueryMobile的主題（theme）和調板（swatches）

如何使用默認調板

創建自己的主題

編輯調板

修改其他樣式

完成更改！

如何創建自定義調板

如何創建獨立的調板文件

修改具體的樣式

如何使用新的調板

開發中的主題編輯器（ThemeRoller）

最後一步，測試你的主題

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

IOS中使用單例的簡單介紹

（原創）ios沙盒－沙盒介紹，文件目錄結構

php checkbox 取值詳細說明-PHPphp技巧

ios批量創建UIImageView，微博九宮格圖片展示

Smarty常用函數和語法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結