使用jQuery Mobile框架开发移动端Web App的入门教程
一.jQuery Mobile 的渐进增强设计与浏览器支持
根据维基百科（ 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 （终端用户 的浏览器习惯应受尊重）
若在实际的开发中使用到 Web sql Database 等 HTML5 技术，则最终的 Web App 被支持 度会比以上 jQuery Mobile 的被支持 度低，但两个主流的移动浏览器 Android 与 Apple iOS 的系统浏览器及其桌面版本肯定能提供最好的支持 。
二.HTML5 data-* 属性
jQuery Mobile 依赖 HTML5 data-*
属性 来提供一系列的
支持 （ UI 组件、过渡和
页面 结构），
不支持 该 HTML5
属性 的浏览器会默认忽略这些
属性 的
效果 ，比如在
页面 中
添加 一个版头，可以使用以下的 HTML：
jQuery Mobile Demo
这样就能产生一个 jQuery Mobile 样式的版头，从下文的图中可以看出，这样的版头样式很适合移动设备使用，并且在添加 data-role="header" 属性 后，div 内的 h1 也会被渲染成一定样式，这就是 jQuery Mobile 的方便快捷，也是它的设计宗旨—— Write Less,Do More 。
除此之外 jQuery Mobile 中还有以下的 data-role 属性 （部分属性 ），已经赋予了一定的样式及用户 操作响应效果 。
data-role="content" ， data-role="button" ， data-theme ="",data-role="controlgroup" ， data-inline="true" ， data-role="fieldcontain" ， data-role="listview" ， data-rel="dialog" ， data-transition="pop" ，分别对应着主体内容 、按钮，主题 颜色，已编辑按钮，内联按钮，表单元素，列表视图，对话框，页面 过渡。
三.jQuery Mobile 基本使用方法
1.引入 jQuery Mobile
使用 jQuery Mobile ，需要在网页页眉中引入 jQuery Mobile 组件，
包括 以下部分
（1）jQuery 库
（2）jQuery Mobile CSS
（3）jQuery Mobile 库
可以通过这样的 head 引入以上组件
jQuery Mobile Demo
<
Meta name="viewport" content="width=device-width,initial-scale=1">
2.加入 viewport
在 Android 的浏览器中，若没有设定
页面 宽度，它会认为
页面 宽度是 980px ，因此我们可以在 head 里加入一个 viewport，让移动浏览器知道屏幕大小，只是一个 viewport
标签 ，就已经给
用户 带来更好的体验。
Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.5">
3.简单的页面 实例
在引入 jQuery Mobile 需要的组件后，我们可以创建 jQuery Mobile
页面 ，下面给出一个简单的例子。
jQuery Mobile Demo
<
Meta name="viewport" content="width=device-width,initial-scale=1">
@H_403 _71@
<div data-role="page" id="home">
<div data-role="header">
jQuery Mobile Demo
<div data-role="content">
主体内容
