html5 jquery app,使用 jQuery Mobile 与 HTML5 开发 Web App (二)

这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇，在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件、事件响应以及可以调用的方法，而作为该系列的第一篇文章，Kayo 将会先介绍 jQuery Mobile 的基本情况和一些基础的实例。

一.jQuery Mobile 的渐进增强设计与浏览器支持

在上一篇文章中， Kayo 简单介绍了渐进增强设计的概念，可以参考文中的第四点内容。而 jQuery Mobile 虽然是一些新 web 技术( HTML5、CSS3 和 JavaScript )的产物，但对于不能提供以上技术支持的设备也会尽量提供最好的体验。

根据维基百科( Wikipedia ) 的解释，渐进增强的设计主要包括以下几点

basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容)

basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能)

sparse, semantic markup contains all content (所有的内容应该在少量语义标签内)

enhanced layout is provided by externally linked CSS (增强的功能应该由外部 CSS 提供)

enhanced behavior is provided by unobtrusive, externally linked JavaScript (增强的行为由外部 JavaScript 提供 )

end-user web browser preferences are respected (终端用户的浏览器习惯应受尊重)

因为 jQuery Mobile 使用了渐进增强的设计理念，因而它所支持的系统与平台也很广泛，能提供 A 级支持(支持全部的增强的体验，包括基于 Ajax 的动画页面转场)的有以下平台：

Apple iOS 3.2-5.0

Android 2.1-2.3 , 3.1, 4.0

Windows Phone 7-7.5

Blackberry 6.0 , 7

Blackberry Playbook 1.0-2.0

Palm WebOS 1.4-2.0 , 3.0

Firebox Mobile (10 Beta)

Skyfire 4.1

Opera Mobile 11.5

Meego 1.2

Samsung bada 2.0

Kindle 3 and Fire

Nook Color 1.4.1

Chrome Desktop 11-17

Firefox Desktop 4-9

Internet Explorer 7-9

Opera Desktop 10-11

注：若在实际的开发中使用到 Web SQL Database 等 HTML5 技术，则最终的 Web App 被支持度会比以上 jQuery Mobile 的被支持度低，但两个主流的移动浏览器 Android 与 Apple iOS 的系统浏览器及其桌面版本肯定能提供最好的支持。

二.HTML5 data-* 属性

jQuery Mobile 依赖 HTML5 data-* 属性 来提供一系列的支持( UI 组件、过渡和页面结构)，不支持该 HTML5 属性的浏览器会默认忽略这些属性的效果，比如在页面中添加一个版头，可以使用以下的 HTML：

Html代码

jQuery Mobile Demo