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>

推荐阅读更多精彩内容