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

本文假設(shè)讀者已具備初步的jQuery Mobile相關(guān)知識(shí)，如果讀者不大了解jQuery Mobile，可以通過(guò)如下專題進(jìn)行學(xué)習(xí)：jQuery Mobile基礎(chǔ)入門(mén)教程

jQuery Mobile中的主題

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

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

而另外一個(gè)建議使用的元素是標(biāo)簽，這個(gè)標(biāo)簽的作用是指定瀏覽器以何種方式在手機(jī)上顯示網(wǎng)頁(yè)，代碼如下：

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

<meta viewport>標(biāo)簽對(duì)于在移動(dòng)設(shè)備上正確顯示移動(dòng)網(wǎng)頁(yè)是十分重要的，如果不使用該標(biāo)簽，則頁(yè)面內(nèi)容在顯示時(shí)可能會(huì)失真或者變形，或者是根本不能適合移動(dòng)設(shè)備瀏覽。在下圖中，顯示了一個(gè)使用標(biāo)簽的頁(yè)面，可以看到，頁(yè)面內(nèi)容的顯示能適合移動(dòng)設(shè)備的大小。

jQuery Mobile框架中，包含了一個(gè)頁(yè)面主題的框架，它提供了對(duì)頁(yè)面樣式的相關(guān)控制功能。通過(guò)使用HTML5的data-theme屬性標(biāo)簽，能輕易為某一個(gè)頁(yè)面元素應(yīng)用已有的jQuery Mobile的樣式。默認(rèn)的主題樣式有5種，使用英文字母去區(qū)分，比如A-E開(kāi)頭的都內(nèi)置的樣式，開(kāi)發(fā)者可以通過(guò)下載jQuery Mobile的代碼中去學(xué)習(xí)了解這樣樣式文件是如何編寫(xiě)的。假如開(kāi)發(fā)者要編寫(xiě)新的樣式，可以使用F-Z字母中的任意一個(gè)去命名新建立的樣式，然后就可以編寫(xiě)相關(guān)的代碼。

頁(yè)面的主題樣式

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

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

這里指定了使用一個(gè)新的主題樣式，命名為”f”。實(shí)際上，jQuery mobile框架為自動(dòng)為當(dāng)前的頁(yè)面增加對(duì)應(yīng)的CSS樣式，下面代碼就是瀏覽器在執(zhí)行代碼后返回生成的代碼：

<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為根據(jù)data-role的設(shè)定樣式去進(jìn)行設(shè)置賦值，而ui-body-f則 為用戶自定義的樣式，下面是一個(gè)自定義的ui-body-f樣式的代碼：

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

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

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

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

因此，只要掌握了這種方法，開(kāi)發(fā)者就可以對(duì)頁(yè)面中的各類元素進(jìn)行樣式的定義了，十分方便。

工具欄樣式的定義

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

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

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

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

為此，需要?jiǎng)?chuàng)建一個(gè)CSS樣式，如下：

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

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

 .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 */ 
} 

在這個(gè)樣式中，設(shè)置了一些基本的CSS3屬性外，還為不同的瀏覽器設(shè)計(jì)了不同的背景顏色和相關(guān)的漸變背景，更詳細(xì)的關(guān)于CSS3 漸變背景的設(shè)置請(qǐng)參考相關(guān)資料。

內(nèi)容的主題樣式

接下來(lái)，我們學(xué)習(xí)下在內(nèi)容頁(yè)部分，是如何應(yīng)用主題樣式的。例子代碼如下：

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

注意,在這里,使用了data-role屬性的值為collaspsible,表明這個(gè)頁(yè)面的div是一個(gè)可折疊的層,并且設(shè)置了data- collapsed屬性為true，其效果為當(dāng)頁(yè)面加載時(shí)，顯示的是折疊狀態(tài)，而當(dāng)用戶點(diǎn)標(biāo)題欄時(shí)，才會(huì)顯示登陸的表單。同樣，在data-theme屬 性中設(shè)置樣式為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中，為標(biāo)題工具欄定義了三種狀態(tài)的樣式，即：非激活，激活中和鼠標(biāo)移動(dòng)在上面。其中的標(biāo)簽會(huì)被CSS修飾轉(zhuǎn)變?yōu)橐粋€(gè)帶有ui-collapsible-heading的樣式，而它包含的文字，這里是指“Login”將會(huì)被轉(zhuǎn)化為帶有樣 式的鏈接，其中有三種不同的鏈接的樣式，分別為ui-btn-up-f,ui-btn-down-f,ui-btn-hover-f,分別代表的工具條的 三種不同的狀態(tài)(up,down,hover)。以上的樣式中，會(huì)根據(jù)data-theme中指定的樣式號(hào)而有所變化，比如開(kāi)發(fā)者指定的是使用g的新樣 式，則以上的CSS樣式中，則會(huì)全部以-g結(jié)尾。

列表樣式

在移動(dòng)頁(yè)面應(yīng)用中，列表樣式是十分普遍的，因?yàn)樗鼈兒苋菀椎貙?dǎo)航。在jQuery Mobile中，使用列表很簡(jiǎn)單，只需要在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> 

默認(rèn)的樣式如下圖所示：

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

同樣，為列表增加樣式也十分簡(jiǎn)單，只需要設(shè)置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; 
} 

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

表單及按鈕的主題樣式

在jQuery mobile中，增加表單及按鈕，其實(shí)跟普通的網(wǎng)頁(yè)中增加差不多，只需要增加相關(guān)的input標(biāo)簽元素或button標(biāo)簽元素即可，代碼示例如下：

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

這里我們?cè)谏衔闹幸呀?jīng)談到，即將輸入文本框和密碼框都使用f樣式，在上面的代碼中，請(qǐng)留意

標(biāo)簽一段，其中分別對(duì)兩個(gè)按鈕使用了不同的樣式，對(duì)于RESET按鈕，

使用的是默認(rèn)的jQuery mobile的樣式，而對(duì)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; 
} 

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

小結(jié)

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