码迷,mamicode.com
首页 > Web开发 > 详细

jQueryMobile--栅格布局

时间:2015-12-18 00:03:56      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:

 

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>

 

 

 

 

 

 

jQueryMobile--栅格布局

标签:

原文地址:http://www.cnblogs.com/baiyanfeng/p/5055634.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!