jQueryMobile--栅格布局
jQueryMobile是一个HTML组件库，与jQueryUI和Bootstrap是一个级别的，但更偏向于移动App开发。
Page
Transition
Button
Navbar
Collapsible
1.关于jqm的手册
(1)下载安装包Demo —— 初期
(2)完整的API列表(在线) —— 后期
http://api.jquerymobile.com/
2.关于jqm Page的切换——深入探讨
(1)一个HTML声明多个Page
不足：即使不显示的Page，初始时也会被客户端请求下来。
(2)一个HTML只声明一个Page，通过超链接进行页面跳转
1)jQM已经完全改写了超链接的默认行为——把同步请求转为异步AJAX请求
2)异步请求得到的HTML页面，只会保留其中的第一个Page，添加到当前DOM树上；其它所有内容全部删除！
3)推荐一个项目中只有起始页是完整的HTML页面，其它被跳转到的页面都是HTML片段——只包含一个PAGE的声明。
4)注意：基于上面的原因，jQM项目中所有的HTML页面中元素的id应该是全局唯一的！
3.jQM提供的网格布局系统——Grids
(1)jqm提供的布局系统没有预定义margin或padding
(2)jqm中的“行”分为五种：
默认 一行中只有一列，列宽100%
.ui-grid-a 一行中有二列并等分，列宽50%
.ui-grid-b 一行中有三列并等分，列宽33%
.ui-grid-c 一行中有四列并等分，列宽25%
.ui-grid-d 一行中有五列并等分，列宽20%
(3)jqm一行中列依次排序为：
第一列： .ui-block-a
第二列： .ui-block-b
第三列： .ui-block-c
第四列： .ui-block-d
第五列： .ui-block-e
(4)jqm中所有的.ui-block-a必须重起一行。
(5)jqm中一行默认只能等分为N列，若想不等分，只能自定义样式。
(6)列中若放置<button>则默认填满整列；若是超链接或INPUT按钮，默认会添加左右margin:5px;
4.jQM提供的组件——分组和分隔——模拟实现Bootstrap中的Panel
<div/h3 class="ui-bar"></div/h3>
<div/p class="ui-body"></div/p>
5.jQM提供的组件——Table——真正的响应式表格——重点
真正的响应式表格有两种：
(1)回流(reflow)模式的响应式表格
<table data-role="table" class="ui-responsive" data-mode="reflow">
</table>
屏幕够宽时显示效果与普通表格相同；不够宽时每一行数据都会独立显示。
(2)列切换(column toggle)模式的响应式表格
<table data-role="table" class="ui-responsive" data-mode="columntoggle">
<thead>
<tr>
<th>必须显示的列</th>
<th data-priority="6">优先级最低(最先被隐藏)的列</th>
<th data-priority="5">优先级次低(次先被隐藏)的列</th>
...
<th data-priority="1">优先级最高(最后被隐藏)的列</th>
</tr>
</thead>
</table>
6.jQM提供的组件——ListView（列表组）——重点
<ul/ol data-role="listview">
<li></li>
</ul/ol>
7.jQM提供的组件——表单组件
TextInput组件：
单行文本输入域
多行文本输入域
下拉框
特殊的Form控件：
滑块控件： <input type="range">
开关控件： <select data-role="slider">
<option></option>
<option></option>
</select>
单选按钮组：<fieldset data-role="controlgroup" data-type="vertical/horizontal">
<legend>提示文字</legend>
<input type="radio">
<label></label>
</fieldset>
复选按钮组：<fieldset data-role="controlgroup" data-type="vertical/horizontal">
<legend>提示文字</legend>
<input type="checkbox">
<label></label>
</fieldset>
