jQuery Mobile教程:grid组件设计实现细节

本文我们来通过源码分析的方式，深度认识一下jQuery Mobile中grid组件的设计实现细节

先看一下jquery.mobile-1.1.0.css的样式设计源码：

/*grid的class*/ .ui-grid-a,.ui-grid-b,.ui-grid-c,ui-grid-d{ 	overflow:hidden; }  /*block的class*/ .ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d,.ui-block-e{ 	margin:0; 	padding:0; 	border:0; 	float:left;		//采用float 	min-height:1px; }   /*2列均摊*/ .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b{ 	width:50%;		//2列均摊 } .ui-grid-a .ui-block-a{ 	clear:left; } 	 /*3列均摊*/ .ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c{ 	width:33.333%;	//3列均摊 } .ui-grid-b .ui-block-a{ 	clear:left; }  /*4列均摊*/ .ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d{ 	width:25%;	    //4列均摊 } .ui-grid-c .ui-block-a{ 	clear:left; } 	 /*5列均摊*/ .ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e{ 	width:20%;		//5列均摊 } .ui-grid-d .ui-block-a{ 	clear:left;	 }    

那如果我们要实现自定义的不规则网格呢？

比如：我要设置2列，左30%，右70%

.ui-grid-a .ui-block-a{ 	width:30%; } .ui-grid-a .ui-block-b{ 	width:70%; } 

再比如：我要设置3列，左30%，中20%，右50%

.ui-grid-b .ui-block-a{ 	width:30%; } .ui-grid-b .ui-block-b{ 	width:20%; } .ui-grid-b .ui-block-c{ 	width:50%; } 

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery mobile
， ui
， jquery.mobile
， grid
， jquery ui
， ui设计
， block
， width
， kendo ui
， andrid ui
， grid grid
， wapjquery ui
， 环信ui
left
jquery官网、jquery api、jquery下载、jquery教程、jquery ajax，以便于您获取更多的相关知识。