而目前，出現了一批十分優秀的支持HTML5/CSS3的移動應用開發框架，其中最為大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com)，它可以讓熟悉jQuery框架的開發者快速開發出基于HTML5的移動應用，而且直接通過手機的瀏覽器即可瀏覽。除此以外，jQuery Mobile也有很好的擴展性，用戶可以很好地對其進行定制修改，本文將指導讀者對jQuery Mobile的提供的主題樣式進行自定義，從而創建符合用戶需要的樣式。

本文假設讀者已具備初步的jQuery Mobile相關知識，如果讀者不大了解jQuery Mobile，可以通過如下專題進行學習：jQuery Mobile基礎入門教程

jQuery Mobile中的主題

在jQuery Mobile中，有一個建議的頁面模版結構，其中包含了比如頁面頭部，頁面主體和頁腳等部分。jQuery Mobile使用HTML5中的data-role屬性進行定義，下面的代碼中就顯示了一個主體頁面的框架：

<div data-role="page"> 
 
    <div data-role="header"> 
        <h1>Page Title</h1> 
    </div> 
 
    <div data-role="content"> 
        <p>Page content goes here.</p>         
    </div> 
 
    <div data-role="footer"> 
        <h4>Page Footer</h4> 
    </div> 
     
</div> 

而另外一個建議使用的元素是標簽，這個標簽的作用是指定瀏覽器以何種方式在手機上顯示網頁，代碼如下：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<meta viewport>標簽對于在移動設備上正確顯示移動網頁是十分重要的，如果不使用該標簽，則頁面內容在顯示時可能會失真或者變形，或者是根本不能適合移動設備瀏覽。在下圖中，顯示了一個使用標簽的頁面，可以看到，頁面內容的顯示能適合移動設備的大小。

jQuery Mobile框架中，包含了一個頁面主題的框架，它提供了對頁面樣式的相關控制功能。通過使用HTML5的data-theme屬性標簽，能輕易為某一個頁面元素應用已有的jQuery Mobile的樣式。默認的主題樣式有5種，使用英文字母去區分，比如A-E開頭的都內置的樣式，開發者可以通過下載jQuery Mobile的代碼中去學習了解這樣樣式文件是如何編寫的。假如開發者要編寫新的樣式，可以使用F-Z字母中的任意一個去命名新建立的樣式，然后就可以編寫相關的代碼。

頁面的主題樣式

我們先來看下如何定義頁面主題樣式。頁面的主題樣式是通過data-role來指定屬性的值為page,再使用data-theme主題指定使用的樣式，如下代碼：

<div data-role="page" data-theme="f"> 

這里指定了使用一個新的主題樣式，命名為”f”。實際上，jQuery mobile框架為自動為當前的頁面增加對應的CSS樣式，下面代碼就是瀏覽器在執行代碼后返回生成的代碼：

<div data-role="page" data-theme="f" 
class="ui-page ui-body-f ui-page-active" style="min-height: 580px;"> 

可以看到，其中的樣式class="ui-page ui-body-f ui-page-active"為jQuery mobile添加的樣式。其中ui-page和ui-page-active為根據data-role的設定樣式去進行設置賦值，而ui-body-f則 為用戶自定義的樣式，下面是一個自定義的ui-body-f樣式的代碼：

.ui-body-f {  
  background-color: #f9f9f9;  
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;  
}  

在這個自定義的樣式中，定義了背景顏色和字體。如果要對某一個移動頁面中的某些元素進行自定義，也是可行的，可以使用的方法為在樣式中指定頁面的元素名，如下代碼所示：

.ui-body-f input[type="text"],  
.ui-body-f input[type="password"] {  
  background-color: #ccc;  
}  

其中指定了對頁面中的文本框和密碼框，使用的是ui-body-f的CSS樣式。

因此，只要掌握了這種方法，開發者就可以對頁面中的各類元素進行樣式的定義了，十分方便。

工具欄樣式的定義

在jQuery Mobile框架中,工具條屬于頁面的頭部和底部元素。為了將工具條定義為頭部或者底部，可以使用data-role屬性去指定，如下代碼所示，表示在一個頁面中同時定義了頭部的工具欄和底部的工具欄：

<div data-role="header"> 
    <h1>Page Title</h1> 
</div> 
 
<div data-role="footer"> 
    <h4>Page Footer</h4> 
</div> 

同樣，為頁面的頭部和底部指定一個樣式也是很簡單的，也是利用data-theme屬性，如下代碼所示：

<div data-role="header" data-theme="f"> 
    <h1>Page Title</h1> 
</div> 

為此，需要創建一個CSS樣式，如下：

.ui-bar-f {  
  padding: 10px 0px;  
  background-color: #069;  
  border-bottom: 2px solid #036;  
  color: #fff;  
}  

就是說，新創建的這個樣式是裝飾所有的data-theme為F的頁面元素。然而，有的時候，可能需要頁面的底部使用不同的樣式，那么可以另外在新建一個名為g的樣式，創建的代碼如下：

 .ui-bar-g { 
  margin-top: 20px; 
  padding: 10px 0; 
  color: #fff; 
  border-bottom: 2px solid #000; 
 
  background-color: #000; 
  background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,0.65) 100%); 
  /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, 
  rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, 
  rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* Opera11.10+ */ 
  background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* IE10+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', 
  endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ 
  background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* W3C */ 
} 

在這個樣式中，設置了一些基本的CSS3屬性外，還為不同的瀏覽器設計了不同的背景顏色和相關的漸變背景，更詳細的關于CSS3 漸變背景的設置請參考相關資料。

內容的主題樣式

接下來，我們學習下在內容頁部分，是如何應用主題樣式的。例子代碼如下：

<div data-role="collapsible" data-collapsed="true" data-theme="f"> 
    <h3>>Login</h3> 
    Login form will go here 
</div> 

注意,在這里,使用了data-role屬性的值為collaspsible,表明這個頁面的div是一個可折疊的層,并且設置了data- collapsed屬性為true，其效果為當頁面加載時，顯示的是折疊狀態，而當用戶點標題欄時，才會顯示登陸的表單。同樣，在data-theme屬 性中設置樣式為f,其樣式定義如下：

ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-up-f { 
  background: #666; 
  color: #fff; 
  text-decoration: none; 
} 
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-down-f, 
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-hover-f { 
  background: #999; 
  color: #fff; 
  text-decoration: none; 
} 

在上面的這段CSS中，為標題工具欄定義了三種狀態的樣式，即：非激活，激活中和鼠標移動在上面。其中的標簽會被CSS修飾轉變為一個帶有ui-collapsible-heading的樣式，而它包含的文字，這里是指“Login”將會被轉化為帶有樣 式的鏈接，其中有三種不同的鏈接的樣式，分別為ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f,分別代表的工具條的 三種不同的狀態(up,down,hover)。以上的樣式中，會根據data-theme中指定的樣式號而有所變化，比如開發者指定的是使用g的新樣 式，則以上的CSS樣式中，則會全部以-g結尾。

列表樣式

在移動頁面應用中，列表樣式是十分普遍的，因為它們很容易地導航。在jQuery Mobile中，使用列表很簡單，只需要在data-role中指定為listview即可，如下代碼所示：

<ul data-role="listview" data-inset="true" data-theme="f"> 
  <li><a href="#">Title name</a></li> 
  <li><a href="#">Title name</a></li> 
  <li><a href="#">Title name</a></li> 
</ul> 

默認的樣式如下圖所示：

如果要上面的列表實現圓角效果的話，可以增加data-inset屬性，并將其屬性值設置為true即可，如下效果圖，出現了圓角：

同樣，為列表增加樣式也十分簡單，只需要設置data-theme屬性的值為樣式的名稱即可，比如同樣增加樣式f，定義樣式f如下：

.ui-listview .ui-btn-up-f a, 
.ui-listview .ui-btn-down-f a, 
.ui-listview .ui-btn-hover-f a { 
  color: #fff; 
} 

這里，設定了文字的顏色為白色，并且使用ui-btn-up-f，ui-btn-down-f，ui-btn-hover-f設置了列表選項的三種不同狀態(up,down,hover)。

表單及按鈕的主題樣式

在jQuery mobile中，增加表單及按鈕，其實跟普通的網頁中增加差不多，只需要增加相關的input標簽元素或button標簽元素即可，代碼示例如下：

<div data-role="collapsible" data-collapsed="true" data-theme="f"> 
  <h3>>Login</h3> 
  <form action="" method="post"> 
    <label for="username">Username</label> 
    <input type="text" name="username" id="username" /> 
    <label for="username">Password</label> 
    <input type="password" name="password" id="password" /> 
    <fieldset class="ui-grid-a"> 
      <div class="ui-block-a"> 
        <button type="reset" data-inline="true">Reset</button> 
      </div> 
      <div class="ui-block-b"> 
        <button type="submit" data-inline="true" data-theme="f">Submit</button> 
      </div> 
    </fieldset> 
  </form> 
</div> 

同樣，我們指定表單的樣式如下：

.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] { 
  background-color: #ccc; 
} 

這里我們在上文中已經談到，即將輸入文本框和密碼框都使用f樣式，在上面的代碼中，請留意

標簽一段，其中分別對兩個按鈕使用了不同的樣式，對于RESET按鈕，

使用的是默認的jQuery mobile的樣式，而對submit按鈕，則使用的是data-theme=f的樣式，

***看下f樣式的css代碼定義，如下：

.ui-btn-up-f { 
  background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, 
  rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* Opera11.10+ */ 
  background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* IE10+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396b9e', 
  endColorstr='#a64e89c5',GradientType=0 ); /* IE6-9 */ 
  background: linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* W3C */ 
  border: 1px solid #225377; 
  text-shadow: #225377 0px -1px 1px; 
  color: #fff; 
} 
.ui-btn-down-f, 
.ui-btn-hover-f { 
  background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%, 
  rgba(75,136,182,0.65) 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, 
  rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%, 
  rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* Opera11.10+ */ 
  background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%, 
  rgba(75,136,182,0.65) 100%); /* IE10+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72b0d4', 
  endColorstr='#a64b88b6',GradientType=0 ); /* IE6-9 */ 
  background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* W3C */ 
  border: 1px solid #00516E; 
  text-shadow: #014D68 0px -1px 1px; 
  color: #fff; 
} 

本文的代碼可以在如下這個連接下載(http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=774893&filename=jquery-mobile-custom-themes.zip&method=http&locale= )

小結

本文講解了如何在jQuery Mobile 框架中，自定義合適各種布局的樣式主題，其中關鍵點在于使用data-theme屬性指定和命名新建立的CSS樣式，并且要注意樣式的命名和編寫要符合 jQuery Mobile的規范即可，更多的關于jQuery Mobile自定義樣式的內容，請參考其官方網站的文檔指引。