详细说明ui-grid网格布局在jQuery移动页面开发中的使用

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

Jquery Mobile提供了四种预设布局，在任何情况下都可以要求列。

两列(使用ui-grid-a类)、三列(使用ui-grid-b类)、四列(使用ui-grid-c类)和五列(使用ui-grid-d类)网格是100%宽的，完全不可见(没有边界或背景)，并且没有边距或填充，因此它们不会干扰放置在其中的样式元素。在网格容器中，子元素以连续的方式被分配到ui-block-a/b/c/d，这样每个“block”元素都是浮动的，并置在一起形成一个网格。其中ui-block-a类基本上清除了浮动并开始了一个新的行(参见下面的多行网格)。

ui-grid-两列布局。

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

div class=' ui-grid-A ' div class=' ui-Block-A ' strong我是Block A/strong里面的文字会换行/div class=' ui-Block-B ' strong我是Block B/strong里面的文字会换行/div/div！-/grid-a-以上标签产生以下内容布局：

可以看到，网格默认没有可视化建模；他们只是并排展示内容。

网格可以应用于任何容器。在下一个例子中，我们添加了一个ui-grid-a和apply-ui-block，两个按钮扩展到屏幕宽度的50%。

field set class=' ui-grid-a ' div class=' ui-block-a ' button type=' submit '数据-主题=' c ' cancel/button/div class=' ui-block-b ' button type=' submit '数据-主题='b'Submit/button/div /fieldset

请注意，此框架为网格中的左右边距添加了按钮。对于单个按钮，您可以使用类ui-grid-solo和按钮类ui-block-a，就像下面示例中的div一样。这样的按钮将获得相同的利润。

div class=' ui-grid-a ' div class=' ui-block-a ' button type=' button '数据-主题=' c ' previous/button/div class=' ui-block-b ' button type=' button '数据-主题=' c ' next/button/div/div class=' ui-grid-solo ' div class=' ui-block-a '按钮类型='v '数据-主题=' b ' more/button/div/div

主题类(没有数据主题属性)可以从主题系统添加到元素中，包括网格。在下面的块中，我们添加了两个类：ui-bar，添加默认的bar和ui-bar-e，应用背景渐变和字体样式的“E”工具栏主题示例。为了便于说明，每个网格中还添加了一个inline style="height: 120 px "属性来设置每个标准高度。

Ui-block-b三列布局。

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

div class=' ui-grid-B ' div class=' ui-block-A ' block A/div class=' ui-block-B ' block B/div class=' ui-block-C ' block C/div/div！-/grid-b-这是我们的内容，将产生33/33/33%的网格布局。

Ui-block-c四列布局。

一行四列，25/25/25/25%网格，是通过在父容器中指定class=ui-grid-c并添加一个四分之一块而形成的。注：这些风格相同的主题课程的网格布局清晰可见。

Ui-block-c五列布局。

一行五列，20/20/20/20/20%网格，是通过在父容器中指定class=ui-grid-d实现的。

多行多列布局。

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

div id=' grid ' class=' ui-grid-b ' div class=' ui-block-a ' div class=' ui-bar ui-bar ui-bar ui-bar-bar-e ' a/div/div class=' ui-block-b ' div class=' ui-bar ui-bar-c ' div class=' ui-bar ui-bar ui-bar-bar-bar-e ' c/div/div class=' ui-block-a ' div class=' ui-bar ui-ui-bar-ui-bar-e

！doctype html html lang=' en ' head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' title grid-layout demo/title link rel='样式表href=' http://代码。jquery。com/mobile/1。3 .0/jquery。移动一号。3 .0 .量滴CSS ' script src=' http 3360http://代码。jquery。com/jquery-1.9 .-下面的脚本可以省略-script src=' http :/resources/turnoffpushstate。js '/script script src=' http :3358代码。jquery。com/mobile/1。3 .0/jquery。移动一号。3 .0 .量滴js '/脚本/head dy div数据-角色=' page ' div数据-角色=' header ' h1网格布局示例/h1/div数据-角色=' content ' div class=' ui-grid-a '/div div class=' ui-Block-B ' strong我是B区/strong，里面的文字会换行/div /div！-/grid-a-/div/div/body/html(9508 . 163.com)