jQuery Mobile入門教程之主題使用和定制

作者：filod 2011-09-02 14:29:20

移動開發

jQuery Mobile入門教程之主題使用和定制是本文要介紹的內容，本文旨在介紹教大家如何在jQueryMobile構建的站點中控制主題顯示的效果。

jQuery Mobile入門教程之主題使用和定制是本文要介紹的內容，本文旨在介紹教大家如何在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>      
<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#

創建自己的主題

只是添加一個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頁面中，修改對樣式文件的引用鏈接。

如何測試，將在下文詳述。

#p#

如何創建自定義調板

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

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

小結：jQuery Mobile入門教程之主題使用和定制的內容介紹完了，希望通過本文的學習能對你有所幫助！

責任編輯：zhaolei 來源：博客園

jQuery Mobile 主題