本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.1节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
本章介绍jQuery Mobile的基础知识，讲述了使用该框架来搭建页面，导航至其他页面，使用AJAX请求加载内容，以及提供平滑的过渡动画。在页面中，有确定的基础元素（如header1、footer），它们的行为会根据指定的选项而有所不同。这里的“页面搭建，组合基础元素（如column）、事件以及最少量的自定义JavaScript代码”是使用jQuery Mobile的基本要素。
jQuery Mobile与jQuery Core和jQuery UI不同。你不用写一行代码就能使用jQuery Mobile的绝大多数功能：只需向HTML中添加一些属性即可。所有的属性都以data-开头，这与在第1章中讲解data()函数时看到的是一样的。只是jQuery Mobile使用的是jqmData()函数。这在本章之后会讨论。
jQuery Mobile要求用指定的方式来搭建页面。代码清单9-1准备了含有header和最少内容的基本页面配置。
代码清单9-1 显示含有header的简单页面
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>jQuery Mobile: Basics</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 </head> 15 <body> 16 17 <div data-role="page"> 18 19 <div data-role="header"> 20 <h1>My Title</h1> 21 </div> 22 23 <div data-role="content"> 24 <p>Hello world</p> 25 </div> 26 27 </div> 28 29 </body> 30 </html>在上面的HTML中，你会发现有好些东西。首先，第4行和第5行指定了viewport。这段代码要求移动设备调整缩放级别和页面大小，以使内容适应当前的屏幕。当和移动设备打交道时，这尤其重要。viewport的默认宽度依浏览器而定，但一般是在980像素左右。当设备的分辨率比默认设置低或者高时，页面的布局就会变形：表现为，对于屏幕来说太小了，或者会调整缩放级别，因此文本会变得难以阅读以至于需要放大页面。通过设置宽度和初始缩放百分比，可以调整网站内容的大小以便适应设备的屏幕大小。
第6行和第7行引入了一个CSS文件。可以用它来更改颜色。如果你勇气可佳，也能将外观彻底改变。那样的话，你必须考虑一下想测试的设备的数量。在默认情况下jQuery Mobile已经在大量的设备上测试过了。
在第8～13行，你发现同时引入了jQuery Core和jQuery Mobile的JavaScript源文件。在本书的其余部分，由于性能的原因，将JavaScript放在HTML底部加载。在jQuery Mobile中，推荐在头部加载HTML。当链接至其他的页面时，jQuery Mobile会使用AJAX请求来加载内容，这在本章后面的技巧中会见到。当“其他的页面”加载完时，会忽略它们头部中的脚本。任何想加载的、与特定页面相关的脚本须放在该页面的body里面。
第17～27行是实际的代码。大部分都是简单的HTML。在每个div元素中，都有个data-role属性：page、header或者content。这些角色（role）被jQuery Mobile框架用来设置样式、主题和行为。当在浏览器——最好是移动设备浏览器——查看这张页面时可以看到结果。
相关资源：敏捷开发V1.0.pptx