要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容
◆ CSS文件jquery.mobile-1.3.2.min.css
◆ jQuery library jquery-1.7.2.min.js
◆ jQuery Mobile library jquery.mobile-1.3.2.min.js
说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。
有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。参看下面实例：
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div>
页面切换效果：
你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。
例如：<p><a href=”#about” data-transition=”flip”>关于页面</a></p>
slide：从右到左切换（默认）
slideup：从下到上切换
slidedown：从上到下切换
pop：以弹出的形式打开一个页面
fade：渐变褪色的方式切换
flip：旧业面翻转飞出，新页面飞入
对话框：
通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框
<a href="#about" data-rel="dialog" data-transition="slideup">About this app</a>
按钮： 在jQuery Mobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。
<a href="#about" data-role="button">About this app</a>
可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来
<div data-role="collapsible" data-state="collapsed">
<h3>About this app</h3>
<p>This app rocks!</p>
</div>
主题：另外，每一个主题包含26种不同颜色的切换(标记从a 到z)，可以控制前景颜色，背景色和渐变色，典型用法是使页面元素部分替换，你可以使用data-theme属性。例如：<a href="#" data-role="button" data-theme="a">About this app</a>
列表视图： 应用方法就是在ul或ol标签中添加data-role=”listview”属性。
1、简单的文件列表，会有一个好看的盒环绕着每一个列表项
2、链接列表，框架会自动为每一个链接加一个箭头”>”，显示在链接按钮的右侧
3、嵌套列表，如果你在一个li中嵌套另一个ul，jQuery Mobile会为这个嵌套列表自动建立一个”page”，并为它的父li自动加一个链接，这样很容易实现树状菜单选项，设置功能等等。
4、分隔线的按钮列表，在一个li中存放2个链接，你可以建立一个还垂直分隔条，用户可点击左侧或右侧的列表选项，展现不同的内容
5、记数气泡 如果你在列表选项中添加class=”ui-li-count”，框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧，并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数
6、查找过滤 在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面，允许用户根据条件来将一个大的列表项变小(过滤显示)
7、列表分隔 将列表项分割，可以在任意列表项上添加属性data-role=”list-divider
8、列表缩略图和图标。将img元素放在在列表项的开始， jQuery Mobile将会以缩略图的形式来展现，图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以 16 X 16像素的图标
页面跳转： <li><a href="scrollview-direction.html" rel="external">Scroll Direction</a></li>
而另外一个建议使用的元素是标签，这个标签的作用是指定浏览器以何种方式在手机上显示网页，代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1">标签对于在移动设备上正确显示移动网页是十分重要的，如果不使用该标签，则页面内容在显示时可能会失真或者变形，或者是根本不能适合移动设备浏览。
