jQuery Mobile入門教程之主題使用和定制是本文要介紹的內(nèi)容，本文旨在介紹教大家如何在jQueryMobile構(gòu)建的站點(diǎn)中控制主題顯示的效果，來看詳細(xì)內(nèi)容講解。

jQueryMobile的主題（theme）和調(diào)板（swatches），很顯然，jQueryMobile是用CSS來控制在屏幕中的顯示效果的，而在CSS文檔中又包含兩個(gè)主要的部分：

結(jié)構(gòu)：用于控制元素（如按鈕、tab等）的在屏幕中顯示的位置，內(nèi)外邊距等。

主題：用于控制可視元素的視覺效果，例如字體、顏色、漸變、陰影、圓角等。你可以通過修改主題來控制可視元素（如按鈕）的效果。

注意：為了盡量減少圖片的使用（目的是減少請(qǐng)求數(shù)），jQueryMobile使用了css3的方式來替代傳統(tǒng)的圖片方式創(chuàng)建按鈕等控件。當(dāng)然用圖片來設(shè)計(jì)也可以，但這并不是推薦的。

jQueryMobile中的每一個(gè)主題都可以包含一個(gè)或多個(gè)調(diào)板。調(diào)板主要用于設(shè)置工具欄、頁面區(qū)塊、按鈕和列表的顏色。調(diào)板可以很方便的切換主題中的配色方案。

調(diào)板的設(shè)計(jì)思想是為了快速的切換已有網(wǎng)站的主題，在你使用默認(rèn)主題的時(shí)候，可能偶爾需要更改某一些按鈕的顏色來表示強(qiáng)調(diào)（如“試一試”按鈕）或者弱化（如“不關(guān)注”按鈕），這時(shí)便可以定義特定調(diào)板來完成。

jQueryMobile默認(rèn)的CSS文件中包含五個(gè)調(diào)板（a、b、c、d、e），按照慣例，a是優(yōu)先級(jí)最高的調(diào)板，默認(rèn)為黑色（如下圖）：

以下是默認(rèn)主題所規(guī)定的五種調(diào)板和其含義：

a：最高優(yōu)先級(jí)，黑色

b：優(yōu)先級(jí)次之，藍(lán)色

c：基準(zhǔn)優(yōu)先級(jí)，灰色

d：可選優(yōu)先級(jí)，灰白色

e：表示強(qiáng)調(diào)，黃色

如何使用默認(rèn)調(diào)板

jQueryMobile內(nèi)建了主題控制相關(guān)模塊。調(diào)板可以使用data-theme屬性來控制。如果你不指定data-theme屬性，將默認(rèn)采用a調(diào)板。以下代碼定義了一個(gè)采用默認(rèn)調(diào)板的頁面：

<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> 

使用不同的調(diào)板：

<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> 

從代碼結(jié)構(gòu)上看是一樣的，僅僅使用一個(gè)data-theme="e"便可以將整個(gè)頁面切換為黃色色調(diào)：

默認(rèn)情況下頁面上所有的控件都會(huì)繼承page上設(shè)置的調(diào)板，這意味著你只需設(shè)置一次便可以更改整個(gè)page：

<div data-role="page" id="page" data-theme="e"> 

當(dāng)然你也可以獨(dú)立設(shè)置不同元素的調(diào)板，同樣設(shè)置元素的data-theme屬性來實(shí)現(xiàn)：

<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>      
<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> 

 

#p#

創(chuàng)建自己的主題

只是添加一個(gè)data-theme屬性，改改HTML代碼肯定不能使你滿足，修改CSS代碼可以讓你控制更多的可視效果：邊框、位置、邊距等等。jQueryMobile的css代碼定義在jquery.mobile-1.0b1.css文件中。

注意：當(dāng)前版本的css文件是beta 1版本（譯注：截止到譯文發(fā)布時(shí)，jQueryMobile版本為beta 2），最終版本肯定會(huì)更改此文件。所以你要注意在版本更新后替換你修改過的文件名。

在這里下載jQueryMobile的文件后，讓我們開始準(zhǔn)備編輯css文件吧！像本文之前說的，css文件定義了主題和結(jié)構(gòu)兩部分。在主題部分定義了五個(gè)默認(rèn)的主題。

編輯調(diào)板

所有調(diào)板幾乎都是一樣的代碼結(jié)構(gòu)，每種調(diào)板前面都有注釋指明了它是哪種調(diào)板，比如以下是a調(diào)板的部分代碼：

/* 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)有著特定的結(jié)構(gòu)，后綴（a）指明了其所屬調(diào)板，類ui-bar則控制著footer和header的顯示。由于并沒有使用圖片，因此該類依賴于css3的文本陰影、漸變等效果。同理，b調(diào)板的類名為ui-bar-b。驚喜的是，你可以創(chuàng)建你自己的調(diào)板，并命名為類似ui-bar-x的結(jié)構(gòu)即可（下文詳述）。

如果你直接引用你自己服務(wù)器上的css文件，你可以直接在原始文件上修改（當(dāng)然，最好還是留下一個(gè)備份），下例就將默認(rèn)a調(diào)板中的文字顏色修改成了紅色：

.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行）都是定義五種調(diào)板的，其余的代碼用來定義一些通用特性，比如按鈕的圓角等。下例是圓角相關(guān)的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都是通用的，他們不依賴于特定的調(diào)板，每一個(gè)class都控制一個(gè)特定類型的圓角，由于瀏覽器對(duì)CSS3支持的不一致導(dǎo)致了每一個(gè)class里面都寫有三行表示相同含義的代碼。

css文件里包含許多class，你可以按需修改它們。

完成更改！

當(dāng)你準(zhǔn)備創(chuàng)建自己的主題時(shí)，我還是建議你對(duì)原始主題進(jìn)行備份。修改css如下幾步即可：

打開jquery.mobile-1.0b1.css，另存為其他名字，例如：jquery.mobile.theme.css。

修改新建的文件，比如修改上面說到的圓角值。

保存。

在你的HTML頁面中，修改對(duì)樣式文件的引用鏈接。

如何測(cè)試，將在下文詳述。

 

#p#

如何創(chuàng)建自定義調(diào)板

jQueryMobile默認(rèn)的主題各方面都非常好，唯一我想更改的就是調(diào)板。

要更改調(diào)板你有兩個(gè)選擇。一是像上文所訴的那樣修改原始的文件，這樣可能導(dǎo)致你的代碼不易管理——尤其在jQuery更新版本的時(shí)候。

第二個(gè)選擇是充分利用CSS的擴(kuò)展性僅創(chuàng)建獨(dú)立的調(diào)板文件，這樣做可以不用修改原始的jQueryMobile文件，你的文件也更容易維護(hù)。

如何創(chuàng)建獨(dú)立的調(diào)板文件

以下步驟展示了如何創(chuàng)建新的調(diào)板：

創(chuàng)建一個(gè)新的css文件，名為jquery.mobile.swatch.i.css。

將原始css文件中a調(diào)板的代碼復(fù)制進(jìn)去。（16到149行）

粘貼到你的文件中。

更改每一個(gè)class的名字中的后綴，比如將ui-bar-a更改為ui-bar-i.

當(dāng)然還是保存啦。

修改具體的樣式

現(xiàn)在你可以開始修改具體的css代碼了。當(dāng)然，你可以更改任何你想更改的代碼，以下例子中將更改按鈕的背景，涉及到的class有：

.ui-btn-up-i   
.ui-btn-hover-i   
.ui-btn-down-i  

可以看到代碼組織結(jié)構(gòu)都是相同的，原始的.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')";  
} 

每一個(gè)按鈕都采用了漸變的背景，如需修改顏色，請(qǐng)修改包含background, background-image, 和 -ms-filter屬性的值。對(duì)于background-image 和-ms-filter屬性而言，你需要設(shè)置漸變色的開始值和結(jié)束值，例如從淺綠（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')";  
} 

因?yàn)椴煌臑g覽器使用不同的機(jī)制來處理漸變，你需要在三個(gè)地方修改代碼。這本例中第第一個(gè)background-image屬性是Firefox瀏覽器專屬的，第二個(gè)則是webkit內(nèi)核瀏覽器專屬（safari或者chrome），-ms-filter自然就就是微軟的IE了。盡管語法有點(diǎn)各自為政，但基本還是有著同樣的模式：均包含開始色和結(jié)束色。

每個(gè)調(diào)板都包含20多個(gè)class可以修改，你無須全部更改它們。在大多數(shù)情況下只需修改你想要修改的部分就可以了。

jQueryMobile一個(gè)特別大的優(yōu)勢(shì)就是它僅使用css來控制顯示效果，這使得你可以最大程度上靈活控制你網(wǎng)站的顯示。舉例來說，本文附件中包含的f調(diào)板 (jquery-mobile-swatch-f.css)使用@font-face在頁面中嵌入了許多字體。

如何使用新的調(diào)板

每一個(gè)主題只能有26個(gè)調(diào)板（a-z），要使用他們只需要鏈接到你的頁面就行了，下例展示了如何使用兩個(gè)自定義調(diào)板：

<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>      
<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> 

開發(fā)中的主題編輯器（ThemeRoller）

現(xiàn)目前我們修改jQueryMobile主題還都只能局限于修改css文件，幸運(yùn)的是jQueryMobile團(tuán)隊(duì)正致力于開發(fā)jQueryMobile的可視化主題編輯器。根據(jù)官方網(wǎng)站的說法，此編輯器將于2011年jQueryMobile1.0正式發(fā)布時(shí)隨同發(fā)布。

jQueryUI項(xiàng)目所包含的主題編輯器可以讓你輕易創(chuàng)建自定義主題，而jQueryMobile項(xiàng)目的主題編輯器將會(huì)更加高效。

當(dāng)然，主題編輯器會(huì)帶來巨大的方便，但是我仍然建議你試著手寫css代碼來創(chuàng)建主題，這樣能使你更好的理解jQueryMobile的主題系統(tǒng)是如何工作的。

最后一步，測(cè)試你的主題

上面介紹了這么多技術(shù)，相信你也是躍躍欲試了，如果有條件的話我建議你使用Dreamweaver來替代普通的文本編輯器，這樣能使你更高效的編輯和而管理你的文件。

如果你有自己的web服務(wù)器，你可以托管你的文件上去，否則你只能直接在你的移動(dòng)設(shè)備上打開你的網(wǎng)站。在電腦上本地測(cè)試時(shí)我建議你使用chrome來打開你的網(wǎng)站。

以下展示了主題修改的完整步驟：

依然是在官網(wǎng)下載相關(guān)文件。

解壓到你網(wǎng)站目錄下。

新建一個(gè)HTML文件，名為test.html，并復(fù)制以下代碼：

<!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的文檔聲明，老舊的瀏覽器將會(huì)忽略它。

head元素中引用了jQueryMobile的三個(gè)核心文件：

<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文件，當(dāng)然，如果你不需要更改樣式的話你也可以使用jQuery官網(wǎng)提供的cdn。二三兩行鏈接到j(luò)Query和jQueryMobile的js文件——來自CDN。
body元素包含了屏幕中將被顯示的內(nèi)容。使用了header、footer、list等組件，更多詳情請(qǐng)參見[翻譯]jQuery Mobile 入門教程。

保存，現(xiàn)在可以在chrome中或者你的移動(dòng)設(shè)備中查看你的頁面了。

備份jquery.mobile-1.0b1.css文件，修改新的文件名為jquery.mobile.theme.css。

打開此文件，找到.ui-bar-e這個(gè)class，修改color值為red：

color: red; 

移除原來對(duì)jquery.mobile-1.0b1.css的引用，替換成下面的：

<link rel="stylesheet" type="text/css" href="jquery.mobile.theme.css"/> 

保存，并刷新瀏覽器，現(xiàn)在header中的文字應(yīng)該已經(jīng)變?yōu)榧t色的了。

現(xiàn)在你可以按照前文所述步驟創(chuàng)建獨(dú)立的調(diào)板文件來試試。

編輯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> 

保存并刷新頁面，現(xiàn)在按鈕點(diǎn)擊時(shí)已經(jīng)會(huì)變綠了。

小結(jié)：jQuery Mobile入門教程之主題使用和定制的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對(duì)你有所幫助！