9.1 技巧：搭建jQuery Mobile基础页面_H5之家 - 中国HTML5教程资源分享第一站

9.1　技巧：搭建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 05　　　content="width=device-width, initial-scale=1"> 06　　<link 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框架用来设置样式、主题和行为。当在浏览器——最好是移动设备浏览器——查看这张页面时可以看到结果。