3.4 使用jQuery Mobile进行界面制作
上一节的内容介绍了在利用HTML 5实现应用界面时要注意的两个问题，其实相比界面变形，也许大多数开发者会更加烦恼另一个问题：如何设计界面。
与行业外到处鼓吹的“创新”不同，真正从事互联网行业的开发者应该会明白，大多数开发者其实更加信奉拿来主义，一些网上的开源框架很多可拿来作为自己应用的界面。在这些框架中jQuery Mobile是大多数开发者最热爱的一个。
下面将介绍使用jQuery Mobile进行界面制作的方法，首先可以去jQuery Mobile的官方网站（如图3-11所示，网址为：http://jquerymobile.com/）下载需要的jQuery Mobile压缩包。
图3-11 jQuery Mobile官方网站
步骤01 点击右侧的Latest stable按钮即可下载最新版本的jQuery Mobile，当然也可以选择下载比较旧一点的版本。
提示
新版本的jQuery Mobile在UI上模仿了iOS 7的扁平化风格，并且加入了许多新的内容，但是由于国内所能找到的资料有限，并且一些新功能比较复杂，可以选择传统版本先来学习怎样使用jQuery Mobile；但是在本节中由于只是为了体验，因此还是要选择最新版本。
步骤01 解压下载好的文件，发现里面有好多文件，不过只需使用在图3-12中标出的几个文件就可以了（其中jQuery.js需要读者自己去jQuery官网下载）。
图3-12 使用jQuery Mobile时需要使用的几个文件
步骤01 然后就可以使用jQuery Mobile进行开发了，如范例3-6所示。
【范例3-6】使用jQuery Mobile实现的界面。
01 <! DOCTYPE html>
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>使用jQuery Mobile实现的界面</title>
06 <link href="jquery.mobile-1.4.2.css" rel="stylesheet" />
07 <script src="jquery.js"></script>
08 <script src="jquery.mobile-1.4.2.js"></script>
09 </head>
10 <body>
11 <div data-role="page" data-theme="b">
12 <div data-role="header" data-position="fixed">
13 <h1>jQuery Mobile</h1>
14 </div>
15 <div data-role="content">
16 <a href="#" data-role="button">按钮一</a>
17 <a href="#" data-role="button">按钮二</a>
18 <a href="#" data-role="button">按钮三</a>
19 <a href="#" data-role="button">按钮四</a>
20 <a href="#" data-role="button">按钮五</a>
21 <a href="#" data-role="button">按钮六</a>
22 </div>
23 <div data-role="footer" data-position="fixed">
24 <div data-role="navbar" data-position="fixed">
25 <ul>
26 <li><a href="#">微信</a></li>
27 <li><a href="#">通讯录</a></li>
28 <li><a href="#">找朋友</a></li>
29 <li><a href="#">设置</a></li>
30 </ul>
31 </div>
32 </div>
33 </div>
34 </body>
35 </html>
运行之后的界面如图3-13所示。
图3-13 利用jQuery Mobile实现的界面
不知道各位读者有没有感受到jQuery Mobile的巨大优势，仅仅使用了35行代码就已经实现了要手写几百行代码才能够实现的样式，最重要的是凭借一般人的美术功底根本做不出这样精美的界面来。而且jQuery Mobile还有一些隐含的“福利”，比如说用户点击按钮时，按钮还会带有光晕的特效，并且在不同页面切换时也会带有默认的动画效果。
提示
这里将不再对jQuery Mobile进行单独讲解了，因为要单独对jQuery Mobile进行介绍的话至少需要再写一整本厚厚的书才行，有兴趣的读者可以购买《构建跨平台APP:jQuery Mobile移动应用实战》进行学习。