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