一. JQM提供的网格布局系统
jqm提供的布局系统没有预定义 margin或padding
-
jqm中的“行”分为四种
默 认：一行中只有一列，列宽 100%
ui-grid-a 一行中有二列并等分 列宽 50%
ui-grid-b 一行中有三列并等分 列宽 33%
ui-grid-c 一行中有四列并等分 列宽 25%
ui-grid-d 一行中有五列并等分 列宽 20% -
jqm中的列依次排序
第一列： ul-block-a
第二列： ul-block-b
第三列： ul-block-c
第四列： ul-block-d
第五列： ul-block-e jqm中的所有ul-block-a必须重起一行
jqm中一行默认只能等分N列，若不想等分，只能自定义样式
列中若防止button，则默认填满整理，若是链接或input按钮，默认会添加左右margin:5px
JQM提供的组件-分组和分隔，模拟实现bootstrap中的panel
<div/h3 class="ui-bar ui-bar-a"></div/h3>
<div/p class="ui-body ui-body-b"></div/p>
二. jqum提供的组件-Table-真实的响应式表格
列切换(column toggle)模式的响应式表格
<table data-role="table" class="ui-responsive" data-mode="columntoggle">
<thead>
<tr>
<th>必须显示的列</th>
<th data-priority="6">优先级最低(最先被隐藏)</th>
<th></th>
。。。
<th data-priority="1">优先级最高(最后被隐藏)</th>
<th></th>
</tr>
</thead>
</table>
回流(reflow)模式的响应式表格
<table data-role="table" class="ui-responsive" data-mode="reflow">
<table>
屏幕够宽时显示效果与普通表格相同，不够宽时每一行数据都会独立显示
三. JQM提供的组件-ListView(列表组)
<ul/ol data-role="listview">
<li></li>
</ul>
四. jqm提供的组件-表单组件
1. textInput组件：
1）单行文本输入域
2）多行文本输入域
3）下拉框组件
2. 特殊的form控件
1) 滑块组件
<input type="range">
2) 开关控件
<select data-role="slider">
<option></option>
<option></option>
</select>
3) 单选按钮组
<fieldset data-role="controlgroup" data-type="vertical/horizontal">
<legend>legend</legend>
<input type="radio">
<label></label>
</fieldset>
4) 复选按钮组
<fieldset data-role="controlgroup" data-type="vertical/horizontal">
<legend>legend</legend>
<input type="checkbox">
<label></label>
</fieldset>