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

二. jqum提供的组件-Table-真实的响应式表格

列切换(column toggle)模式的响应式表格

   
           。。。
           
必须显示的列 优先级最低(最先被隐藏) 优先级最高(最后被隐藏)

回流(reflow)模式的响应式表格

    
屏幕够宽时显示效果与普通表格相同,不够宽时每一行数据都会独立显示

三. JQM提供的组件-ListView(列表组)

四. jqm提供的组件-表单组件

 1. textInput组件:

   1)单行文本输入域
   2)多行文本输入域
   3)下拉框组件

 2. 特殊的form控件

   1) 滑块组件 

      

   2) 开关控件

      

   3) 单选按钮组

       
legend
4) 复选按钮组
legend

你可能感兴趣的:(JQM网格布局系统)