Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve grid layout in jQuery mobile. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

3.4 content formatting

JQuery Mobile provides many useful tools and components, such as multi-column grid layout, folded panel control, etc., which can help developers quickly format the content of the text area.

3.4.1 Grid layout

The CSS style "ui-grid" provided by jQuery Mobile can realize the grid layout of content. The style has four preset configuration layouts: "ui-grid-a", "ui-grid- b", "ui-grid-c" and "ui-grid-d", corresponding to two-column, three-column, four-column and five-column grid layout respectively, which can meet the multi-column needs of the page in the maximum range.

When using a grid layout, the overall width is 100%, without any "padding" and "margin" and background color, so it does not affect where other elements are placed in the grid.

Examples 3-12 add multiple types of grid layouts to the content area

1. Function description

Create a new HTML page, add four preset grid layouts to the content area, and display them in blocks by distinguishing them by different theme colors.

two。 Implementation code

Create a new HTML page 3-12.htm and add the code shown in listing 3-12.

Listing 3-12 adds multiple types of grid layouts to the content area

JQuery Mobile grid layout

Header column title

A

B

A

B

C

A

B

C

D

A

B

C

D

E

2012 rttop.cn studio

3. Source code analysis

In the code for this example, to add a multi-column grid area, first build a container through the element, if it is two columns, the value of the "class" attribute added to the container is "ui-grid-a", the three columns are "ui-grid-b", and so on.

Then, add sub-containers to the built container, if it is two columns, add "ui-block-a" and "ui-block-b" style attributes to the two sub-containers; if it is three columns, add "ui-block-a", "ui-block-b" and "ui-block-c" style attributes to the three sub-containers; other multiple columns, and so on.

Finally, place what you want to display in the child container. In this example, each child container places an element, and the code is as follows:

A

In the above code, the element adds three styles through the "class" attribute. The first and second are the styles that come with jQuery Mobile, "ui-bar" is used to control the spacing of each child container, and "ui-bar-b" is used to set the theme style of each child container. The third style, "H70", is a custom style that sets the height of the child container to "60px".

Indicates that if the container chooses two columns, that is, the "class" value is "ui-grid-a", and three subitems are added to its child container, that is, the "class" value is "ui-block-c", then the column is automatically placed on the next row.

This is the end of this article on "how to achieve grid layout in jQuery mobile". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.