标签:
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