JQuery Mobile Tutorial: Grid component Design Implementation Details

Article Introduction: in this article, we have a deep understanding of the design implementation details of the grid component in jquery mobile through source analysis.

In this article, we have a deep understanding of the design implementation details of the grid component in jquery Mobile through the source analysis method.

First look at the jquery.mobile-1.1.0.css style design Source:

/*grid class*/. ui-grid-a,.ui-grid-b,.ui-grid-c,ui-grid-d{ 	Overflow:hidden;  /*block of class*/. ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d,.ui-block-e{ 	margin:0; 	padding:0; 	border:0; 	Float:left;		adopt float 	min-height:1px;}   /*2 ui-grid-a. Ui-block-a, ui-grid-a ui-block-b{ 	width:50%;		2 columns in 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{ 	;	3 columns in 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{ 	%;	    4 columns in 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-e{ 	width:20%;		5 columns in ui-grid-d. ui-block-a{ 	clear:left	 }    

What if we want to implement a custom irregular grid?

For example: I want to set 2 columns, left 30%, right 70%

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

Another example: I want to set 3 columns, left 30%, Middle 20%, right 50%

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