《jQuery Mobile快速入门》—— 2.1 jQuery Mobile页面模板

本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章，第2.1节，作者：【美】Brad Broulik，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.1　jQuery Mobile页面模板

jQuery Mobile快速入门
一个jQuery Mobile页面模板如程序清单2-1所示。在往下讲解之前，我们先来运行一下这个模板。复制HTML模板（ch2/template.html），然后粘贴到你的台式机中，并通过你最喜欢的浏览器中打开它。现在，你运行的就是一个jQuery Mobile app，而且无论使用的是什么浏览器，它看起来应该与图2-1所示相同。该模板符合HTML5语法标准，并且包含了jQuery Mobile的特定属性和asset文件（CSS、js）。在程序清单2-1中，每一个特定的jQuery Mobile asset和属性都突出显示，并进行了解释。

1．对jQuery Mobile来说，这是一个推荐的视图（viewport）配置。device-width值表示，我们希望让内容扩展到屏幕的整个宽度。initial-scale设置了用来查看Web页面的初始缩放百分比或缩放因数。值为1，则显示一个未缩放的文档。作为一名jQuery Mobile开发人员，你可以根据应用程序的需要自定义视图的设置。例如，如果你希望禁用缩放，则可以添加user-scalable=no。然而，如果禁用了缩放，则会破坏应用程序的可访问性，因此要谨慎使用。

2．jQuery Mobile的CSS会为所有的A级和B级浏览器应用风格（stylistic）的优化。你可以根据需要自定义或添加自己的CSS。

3．jQuery库是jQuery Mobile的一个核心依赖，如果你的app需要更多动态行为，则强烈建议在你的移动页面中使用jQuery的核心API。

4．如果你需要改写jQuery Mobile的默认配置，则可以应用你的自定义设置。有关自定义jQuery Mobile默认配置的细节，请参考第8章。

5．jQuery Mobile JavaScript库必须在jQuery和任何可能存在的自定义脚本之后声明。jQuery Mobile库是增强整个移动体验的核心。

6．data-role=“page”为一个jQuery Mobile页面定义了页面容器。只有在构建多页面设计时，才会用到该元素（见程序清单2-3）。

7．data-role=“header”是页眉（header）或标题栏，如图2-1所示。该属性是可选的。

8．data-role=“content”是内容主体的包装容器（wrapping container）。该属性是可选的。

9．data-role=“footer”包含页脚栏（见图2-1）。该属性是可选的。

重要：

CSS和JavaScript文件的顺序必须与程序清单2-1中列出的顺序一致。这种排序是必要的，它可以正确地初始化这些文件，然后再让jQuery Mobile来引用。此外，建议从内容分发网络（Content Delivery Network，CDN）下载这些文件。尤其是，你可以从jQuery Mobile CDN1下载这些文件。这些从CDN中下载的文件都是经过高度优化的，可以为用户提供更好的响应式体验。它们是一些缓存的压缩文件，体积很小，因此可以并行载入。

提示：

为了将页脚定位到屏幕的最底部，可以为页脚元素添加data-position=“fixed”。默认的页脚位置是在内容之后，并不是屏幕的底部。例如，如果你的内容只占据了一半的屏幕高度，则页脚会出现在屏幕中间。

2.1.1　jQuery Mobile页面增强

jQuery Mobile是如何为优化的移动体验增强标记的呢？我们来看图2-2。

1．首先，jQuery Mobile会载入语义HTML标记（见程序清单2-1）。

2．其次，jQuery Mobile会迭代由它们的data-role属性定义的每一个页面组件。由于jQuery Mobile迭代每一个页面组件，因此会为每一个应用优化过的移动CSS3组件添加标记。jQuery Mobile最终会将标记添加到页面中，从而让页面能够在所有平台上普遍呈现。

3．最后，在完成页面的标记添加之后，jQuery Mobile会显示优化过的页面。要查看由移动浏览器呈现的添加源文件，请参考程序清单2-2。

1．base标签（tag）的@href为一个页面中的所有链接指定了一个默认的地址或者默认的目标。例如，当载入特定页面的资源（assets）时（比如图片、CSS、js等）jQuery Mobile会用到@href。

2．body标签包含了header、content和footer组件的增强样式。默认情况下，所有的组件都是使用默认的主题和特定的移动CSS增强来设计（styled）的。作为一个额外的好处，所有的组件现在都证明了可访问性，而这要归功于WAI-ARIA角色和级别。我们可以免费获得这些增强。

现在你应该感觉到，可以很容易地设计一个基本的jQuery Mobile页面了。我们前面已经介绍了核心的页面组件（page、header、content、footer），并看到了一个增强的jQuery Mobile页面所产生的文档对象模型（Document Object Model, DOM）。接下来，我们开始讲解jQuery Mobile的多页面模板。