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>

原文：http://www.cnblogs.com/baiyanfeng/p/5055634.html