jQueryMobile--基础
框架整理：
(1)jQuery是一个JS函数库，简化了DOM&AJAX操作，本质与DOM相同 WriteLess，DoMore。
(2)jQueryUI是一个HTML组件库，丰富了HTML的功能。
(3)Twitter Bootstrap是一个HTML/CSS/JS框架，简化了响应式网页的编写，提供了栅格系统+CSSReset+HTML组件。
(4)Google AngularJS是一个JS框架，改变了网页的编写方式，适用于以数据操作为主的SPA应用。
(5)jQueryMobile是一个HTML组件库，适用于移动App的开发。
bootstrap：脚步、起步、引导程序
1.jQueryMobile概述
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
主要内容可以分为四个部分：
(1)页面&导航
(2)CSS框架
(3)组件
(4)表单组件
2.使用jQM的步骤
(1)项目中引入jquery 1.8+
(2)项目中创建jqm目录，引入jqm必需资源文件
jquery-mobile.css
jquery-mobile.js
images/....
(3)创建HTML页面，引入必需的css和js
(4)body中的data-role="page" 元素
提示：
(1)jQM的HTML文件中，body中必须至少有一个Page,若用户未提供，jqm自动添加；
(2)body中可以声明多个Page，但默认只有第一个可以显示。
(3)jQM中所有的网页内容不能直接置于body中，必须置于Page中。
(4)jQM中所有的样式都是通过预定义的class来设置的，开发者可以直接指定元素的class，也可以为元素指定data-*扩展属性来实现让jqm添加class的功能。
|
老版本的jQM提供了a/b/c/d/e/f六种主题色； 新版本只提供了默认的a(浅底深字)/b(深底浅字)两个主题。 |
3.页面跳转和过场动画
(1)页面跳转可以使用<a>、<button>、<input type="button">等元素，推荐使用<a>——会自动添加过场动画。
(2) 可以跳转到外部的完整HTML页面；也可以跳转到当前HTML中的另一个Page，如：
跳转到外部完整HTML页面：
<a href="xx.html">
跳转到当前HTML中的另一个Page：
<a href="#pageID">
以模态框形式打开另一个Page：
<a href="#pageID" data-rel="dialog">
------------------------------------------------------------
jQM为页面切换添加了非常丰富的过渡动画，使用方法：
<a href="目标页面" data-transition="动画效果名称">
可用的动画效果有：
fade、pop、slide、slideup、slidedown、slidefade、turn、flip、flow、none
4.按钮（Buttons）
(1)可以使用A、BUTTON、INPUT元素实现按钮的样式
(2)可以使用data-role="button"属性实现按钮样式；也可以指定class实现按钮样式，如.ui-btn .ui-corner-all .ui-shadow
(3)按钮默认是块级显示，可以使用.ui-btn-inline实现行内按钮
(4)按钮上可以有文字和图标；若存在图标，必须指定与文字的位置关系；可选值：
.ui-btn-icon-left
.ui-btn-icon-right
.ui-btn-icon-bottom
.ui-btn-icon-top
.ui-btn-icon-notext
(5)按钮可以置于Page的Header中
Header中的第一个按钮默认处于左侧，第二个默认处于右侧，一般只放两个。
<div data-role="header">
<a href="#">文字</a> 默认就是按钮效果
</div>
5.导航条(navbar)
基本结构：
<div data-role="navbar">
<ul>
<li><a href="#"></a></li>
</ul>
</div>
说明：
(1)导航条中一般最多只能有5个项目，超过5个会在一行中只显示2个；
(2)导航条可以出现在Page的Header、Main、Footer中；
(3)处于Header和Footer中navbar默认会占满整行，并和标题字错开。
6.Loader(加载器)
显示"加载中"图片： $.mobile.loading('show');
隐藏"加载中"图片： $.mobile.loading('hide');
7.Panel(面板)
注意：面板在目前版本的jqm中只能放在Page中，Header之前或Footer之后
<div data-role="page">
<div data-role="panel" id="p1"></div>
<div data-role="header"></div>
<div><a href="#面板ID">打开面板</a></div>
<div data-role="footer"></div>
<div data-role="panel" id="p2"></div>
</div>
面板组件可以指定出现位置： data-position="left / right"
以及打开方式：data-display="reveal / overlay / push"
8.折叠组件(Collapsible)和手风琴效果(CollapsibleSet)
折叠组件：
<div data-role="collapsible">
<h3>标题字</h3>
<div>折叠的内容</div>
</div>
折叠组件集合——手风琴效果
<div data-role="collapsibleset">
<div data-role="collapsible"></div>
<div data-role="collapsible"></div>
</div>
