1. 简介jQuery Mobile是由（MT）Media Temple联合多家移动设备厂商以及软件企业共同发起的针对触屏智能手机与平板电脑的Web应用的前端开发框架。 jQuery Mobile构建于大名鼎鼎的jQuery 以及 jQuery UI类库之上，为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性，轻量化以及渐进增强特性与可访问性。 jQuery Mobile框架遵循"write less, do more"思想来设计，通过该框架，用户可以开发跨平台、跨设备的统一的HTML5应用，无需针对每个设备和操作系统分别开发应用代码。目前jQuery Mobile支持的的系统和设备有：iOS, Android, BlackBerry, Tizen, Bada, Windows Phone, WebOS, Symbian。 2. 下载和使用 jQuery Mobile强调语义标注，非常易于使用。只要会使用基本的HTML，就可以基于jQuery Mobile快速构建Web应用。目前JQuery Mobile最新的稳定版本为V1.2.0, 可以通过jQuery Mobile 官方网站http:/// 下载源码。 jQuery Mobile使用非常简单，打开任何你所喜好的文本编辑器，新建一个文件并命名为：test.html, 在该文件开始处添加jQuery Mobile框架代码：
保存文件，并在浏览器中打开，即可浏览。 下面我们来实现一个Hello World例子，<body> 标签中的内容用下面代码替换。
在这段代码中，我们首先使用一个data-role来描绘该页面，同时使用hello作为我们的header data-role。在content标签里面，我们填入了<p>Hello world</p>。 这些特定的data-role定义的HTML5属性，在JQuery Mobile中用于快速构建增强风格的用户界面。 保存代码并在浏览器中打开，效果如下： 图1 Hello world运行效果
读者可以调整浏览器边框的大小来看看jQuery Mobile构建的header，Content等自动添加了哪些样式。My Title可以根据屏幕大小自动居中，而内容部分Hello World则靠左对齐，不管屏幕分辨率是多少。 下面我们再实现以下稍微复杂一点的界面，将正文部分添加进我们移动开发中常见的列表视图，并在结果添加两个并排的按钮。 同样，将<body> 标签中的内容替换，完整代码如下：
我们在浏览器中打开，效果如下： 图2 ListView默认效果
下面我们尝试修改显示的主题： 首先在list-divider中添加data-divider-theme="g"，data-theme="a" ，更新效果如下：
|
|
|
来自： 竹林湘馆 > 《Jquery mobile》
