在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起。Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid

Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列

  • 两列(使用ui-grid-a类)
  • 三列(使用ui-grid-b类)
  • 四列(使用ui-grid-c类)
  • 五列(使用ui-grid-d类)

网格是100%的宽度,完全看不见的(没有边界或背景)和没有margin或padding,所以他们不会干扰样式的元素放在他们里面。在网格容器,子元素被分配ui-block-a / b / c/ d 以连续的方式,使每个“块”元素浮动并列,形成网格。其中ui-block-a类基本上清除浮将开始新的一行(见多行的网格,在下面)。

ui-grid-a 两列布局

建立个两列(50 / 50%)布局,第一层(父容器)添加ui-grid-a属性,第二层(两个子容器)里面分别添加ui-block-a和ui-block-b:

I'm Block A and text inside will wrap
I'm Block B and text inside will wrap
登录后复制

上述标记产生以下内容布局:

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

正如你看到的,缺省情况下网格没有视觉造型;他们只是呈现内容并排。

网格的类可以被应用到任何容器。在下一个例子中,我们添加一个ui-grid-a,并应用ui-block,两个按钮分别延伸到50%的屏幕宽度


登录后复制

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

请注意,这个框架增加网格中的左和右margin的按钮。为一个单一的按钮,您可以使用类ui-grid-solo和按钮类ui-block-a,像下面的例子一个div。这样的按钮将得到同样的margin

登录后复制

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

主题类(没有数据主题属性)从主题系统可以被添加到一个元素,包括网格。在下面的块,我们增加了两个类:ui-bar添加默认的bar和ui-bar-e应用背景梯度和字体风格的“E”工具栏主题的样本。为了说明的目的,一个内联style=“height:120px”属性也被添加到每个网格设置每一个标准高度。

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

ui-block-b 三列布局

网格布局配置使用class= ui-grid-b在父母和3个子容器的元素,每个都有其各自的ui-block-a / a / c类,创建一行三列布局(33 / 33 / 33%)。注意:这些块同样风格的主题课程,网格布局清晰可见。

Block A
Block B
Block C
登录后复制

这为我们的内容,将产生一个33 / 33 / 33%网格布局

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

ui-block-c 四列布局

一行四列,25 / 25 / 25 / 25%网格,是通过在父容器指定class= ui-grid-c和添加四分之一块。注意:这些块同样风格的主题课程,网格布局清晰可见

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

ui-block-c 五列布局

一行五列,20 / 20 / 20 / 20 / 20%网格,是通过在父容器指定class= ui-grid-d

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

多行多列布局

网格设计包装的项目多行。例如,如果您指定了一个三行三列网格(ui-grid-b)在一个容器,有九个子块,则换到3排各3项。有一个CSS规则明确的花车和开始新的一行,当class= ui-block-a是确保在重复序列分配块(A,B,C类,A,B,C,等)映射到网格类型。可以给每行的第一个容器设置为class=ui-block-a 来清除浮动,这样9 个子容器的class 应为:class=ui-block-(a,b,c,a,b,c,a,b,c)。

A
B
C
A
B
C
A
B
C
登录后复制

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP





登录后复制

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery-LMLPHP

09-09 11:52