jQuery Mobile网格布局详解与应用实例.pdfVIP

jQueryMobile布局网格

jQueryMobile了一套基于CSS的列布局方案。不过，一般不推荐在移

动设备上使用列布局，这是由于移动设备的屏幕宽度所限。

但是有时你需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这

时，列布局就恰如其分。

网格中的列是等宽的（总宽是100%），无边框、背景、外边距或内边距。

可使用的布局网格有四种：

网格类列列宽度对应实例

ui-grid-a250%/50%ui-block-a|b

ui-grid-b333%/33%/33%ui-block-a|b|c

ui-grid-c425%/25%/25%/25%ui-block-a|b|c|d

ui-grid-d520%/20%/20%/20%/20%ui-block-a|b|c|d|e

提示：在列容器中，根据不同的列数，子元素可设置类ui-block-a|b|c|d|e。这

些列将依次并排浮动。

实例1:对于ui-grid-a类（两列布局），你必须规定两个子元素ui-block-a和

ui-block-b。

实例2:对于ui-grid-b类（三列布局），请添加三个子元素ui-block-a、

ui-block-b和ui-block-c。

定制网格

你可以通过使用CSS来定制列块：

实例

style

.ui-block-a,

.ui-block-b,

.ui-block-c

{

background-color:lightgray;

border:1pxsolidblack;

height:100px;

font-weight:bold;

text-align:center;

padding:30px;

}

/style

你也可以通过使用行内样式来定制块：

divclass=ui-block-astyle=border:1pxsolid

black;spanText../span/div

多行

在列中包含多个行也是可能的。

注释：ui-block-a-class将始终创建新行：

实例

divclass=ui-grid-b

divclass=ui-block-aspanSomeText/span/div

divclass=ui-block-bspanSomeText/span/div

divclass=ui-block-cspanSomeText/span/div

divclass=ui-block-aspanSomeText/span/div

divclass=ui-block-bspanSomeText/span/div

divclass=ui-block-aspanSomeText/span/div

/div