jQuery Mobile教程:网格grid组件

本文主要看一下jQuery Mobile体系中的grid组件，我们采用"提问●回答"的方式来初步地了解一下：

1、如何设置2列布局？

示例：

<!-- grid container start --> <div class="ui-grid-a">  	<!-- grid block start --> 	<div class="ui-block-a"> 		我是左边的部分 	</div> 	<!-- grid block end -->  	<!-- grid block start --> 	<div class="ui-block-b"> 		我是右边的部分 	</div> 	<!-- grid block end -->  </div> <!-- grid container end -->

图示：

说明：
1、给grid container增加ui-grid-a标示2列布局

2、如何设置3列布局？

示例：

<!-- grid container start --> <div class="ui-grid-b">  	<!-- grid block start --> 	<div class="ui-block-a"> 		我是左边的部分 	</div> 	<!-- grid block end -->  	<!-- grid block start --> 	<div class="ui-block-b"> 		我是中间的部分 	</div> 	<!-- grid block end -->  	<!-- grid block start --> 	<div class="ui-block-c"> 		我是右边的部分 	</div> 	<!-- grid block end -->  </div> <!-- grid container end -->

图示：

说明：
1、给grid container增加ui-grid-b标示3列布局

3、如何设置4列布局？

示例：

<!-- grid container start --> <div class="ui-grid-c">  	<!-- grid block start --> 	<div class="ui-block-a"> 		我是左边的部分 	</div> 	<!-- grid block end -->  	<!-- grid block start --> 	<div class="ui-block-b"> 		我是中间1的部分 	</div> 	<!-- grid block end -->  	<!-- grid block start --> 	<div class="ui-block-c"> 		我是中间2的部分 	</div> 	<!-- grid block end -->  	<!-- grid block start --> 	<div class="ui-block-d"> 		我是右边的部分 	</div> 	<!-- grid block end -->  </div> <!-- grid container end -->

图示：

说明：
1、给grid container增加ui-grid-c标示4列布局

很多同学看到这里面就问了，后面还能支持5列？6列？...还是更多？
其实jquery mobile有自身的一套体系，我们可以看看下面的图

grid container的className的配置如下：

grid block的className的配置如下：

demo

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery mobile
， 布局
， jquery.mobile
， grid
， container
， 组件
， 部分
， Grid组件
， 示例
jquery组件
jquery官网、jquery api、jquery下载、jquery教程、jquery ajax，以便于您获取更多的相关知识。