隨著移動互聯(lián)世界的到來，目前已發(fā)展到多種移動操作系統(tǒng)割據(jù)的局面，而開發(fā)者則急需要能運(yùn)用原有的開發(fā)知識和技能，快速方便地構(gòu)建移動應(yīng)用程序，并期望能運(yùn)行在不同的手機(jī)操作平臺上，比如Android,iOS,黑莓等。
而目前，出現(xiàn)了一批十分優(yōu)秀的支持HTML5/CSS3的移動應(yīng)用開發(fā)框架，其中最為大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com)，它可以讓熟悉jQuery框架的開發(fā)者快速開發(fā)出基于HTML5的移動應(yīng)用，而且直接通過手機(jī)的瀏覽器即可瀏覽。除此以外，jQuery Mobile也有很好的擴(kuò)展性，用戶可以很好地對其進(jìn)行定制修改，本文將指導(dǎo)讀者對jQuery Mobile的提供的主題樣式進(jìn)行自定義，從而創(chuàng)建符合用戶需要的樣式。
本文假設(shè)讀者已具備初步的jQuery Mobile相關(guān)知識，如果讀者不大了解jQuery Mobile，可以通過如下幾篇文章進(jìn)行學(xué)習(xí)，文章鏈接地址為：
統(tǒng)一接口工具JQuery Mobile簡介
http://tech.it168.com/a2010/1210/1136/000001136835.shtml
使用JQuery Mobile實(shí)現(xiàn)手機(jī)新聞瀏覽器
http://tech.it168.com/a2011/0321/1168/000001168231.shtml
JQuery Mobile實(shí)現(xiàn)手機(jī)新聞瀏覽器(2)
http://tech.it168.com/a2011/0323/1169/000001169682.shtml
使用jQuery Mobile實(shí)現(xiàn)新聞瀏覽器(3)
http://tech.it168.com/a2011/0324/1170/000001170077.shtml
jQuery Mobile中的主題
在jQuery Mobile中，有一個建議的頁面模版結(jié)構(gòu)，其中包含了比如頁面頭部，頁面主體和頁腳等部分。jQuery Mobile使用HTML5中的data-role屬性進(jìn)行定義，下面的代碼中就顯示了一個主體頁面的框架：
<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>
而另外一個建議使用的元素是標(biāo)簽，這個標(biāo)簽的作用是指定瀏覽器以何種方式在手機(jī)上顯示網(wǎng)頁，代碼如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1″><meta viewport>標(biāo)簽對于在移動設(shè)備上正確顯示移動網(wǎng)頁是十分重要的，如果不使用該標(biāo)簽，則頁面內(nèi)容在顯示時可能會失真或者變形，或者是根本不能適合移動設(shè)備瀏覽。在下圖中，顯示了一個使用標(biāo)簽的頁面，可以看到，頁面內(nèi)容的顯示能適合移動設(shè)備的大小。
jQuery Mobile框架中，包含了一個頁面主題的框架，它提供了對頁面樣式的相關(guān)控制功能。通過使用HTML5的data-theme屬性標(biāo)簽，能輕易為某一個 頁面元素應(yīng)用已有的jQuery Mobile的樣式。默認(rèn)的主題樣式有5種，使用英文字母去區(qū)分，比如A-E開頭的都內(nèi)置的樣式，開發(fā)者可以通過下載jQuery Mobile的代碼中去學(xué)習(xí)了解這樣樣式文件是如何編寫的。假如開發(fā)者要編寫新的樣式，可以使用F-Z字母中的任意一個去命名新建立的樣式，然后就可以編 寫相關(guān)的代碼。