jQuery mobile如何实现网格布局
这篇文章将为大家详细讲解有关jQuery mobile如何实现网格布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
3.4 内容格式化
jQuery Mobile中提供了许多非常有用的工具与组件，如多列的网格布局、折叠形的面板控制等，这些组件可以帮助开发者快速实现正文区域内容的格式化。
3.4.1 网格布局
jQuery Mobile提供的CSS样式"ui-grid"可以实现内容的网格布局。该样式有4种预设的配置布局："ui-grid-a"、"ui-grid- b"、"ui-grid-c"、"ui-grid-d"，分别对应两列、三列、四列、五列的网格布局形式，可以最大范围满足页面多列的需求。
使用网格布局时，整个宽度为100%，无任何"padding"和"margin"及背景色，因此不会影响到其他元素放入网格中的位置。
实例3-12 在内容区域添加多种类型的网格布局
1. 功能说明
新建一个HTML 页面，在内容区域中添加4种预设的网格布局，并且通过不同的主题颜色进行区分，以分块的形式显示在页面中。
2. 实现代码
新建一个HTML页面3-12.htm，加入代码如代码清单3-12所示。
代码清单 3-12 在内容区域添加多种类型的网格布局
rel="Stylesheet" type="text/css" />
rel="Stylesheet" type="text/css" />
头部栏标题
2012 rttop.cn studio
3. 源码分析
在本实例的代码中，要增加一个多列的网格区域，首先通过
然后，在已构建的容器中添加子容器，如果是两列，则给两个子容器分别添加"ui-block-a"、"ui-block-b"样式属性；如果是三 列，则给三个子容器分别添加"ui-block-a"、"ui-block-b"、"ui-block-c"样式属性；其他多列依此类推。
最后，在子容器中放置需要显示的内容。在本实例中，每个子容器都分别放置了一个
在上述代码中，
说明 如果容器选择的样式为两列即"class"值为"ui-grid-a"，而在它的子容器中添加了三个子项即"class"值为"ui-block-c"，那么该列自动被放置在下一行。
关于"jQuery mobile如何实现网格布局"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
