JQM网格布局系统

一. JQM提供的网格布局系统

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中的列依次排序

   第一列： ul-block-a
   第二列： ul-block-b
   第三列： ul-block-c
   第四列： ul-block-d
   第五列： ul-block-e

4. jqm中的所有ul-block-a必须重起一行

5. jqm中一行默认只能等分N列，若不想等分，只能自定义样式

6. 列中若防止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>