jQuery Mobile開發HTML5移動應用

隨著移動互聯世界的到來，目前已發展到多種移動操作系統割據的局面，而開發者則急需要能運用原有的開發知識和技能，快速方便地構建移動應用程序，並期望能運行在不同的手機操作平台上，比如Android,iOS,黑莓等。

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

本文假設讀者已具備初步的jQuery Mobile相關知識，如果讀者不大了解jQuery Mobile，可以通過如下幾篇文章進行學習，文章鏈接地址為：

統一接口工具JQuery Mobile簡介

http://tech.it168.com/a2010/1210/1136/000001136835.shtml

使用JQuery Mobile實現手機新聞浏覽器

http://tech.it168.com/a2011/0321/1168/000001168231.shtml

JQuery Mobile實現手機新聞浏覽器(2)

http://tech.it168.com/a2011/0323/1169/000001169682.shtml

使用jQuery Mobile實現新聞浏覽器(3)

http://tech.it168.com/a2011/0324/1170/000001170077.shtml

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>

而另外一個建議使用