Detailed jquery mobile page development in the Ui-grid grid layout using _jquery

On a mobile device, the width of the screen is narrow, so you don't usually use a multiple-column layout, but sometimes you might want to arrange small elements, such as buttons or side navigation labels, for example, into multiple columns. The Jquery Mobile Framework provides a simple way to build a layout of columns based on CSS called Ui-grid

Jquery Mobile provides four preset layouts that you can use in all cases

• Two columns (using the Ui-grid-a Class)
• Three columns (using the Ui-grid-b Class)
• Four columns (using the Ui-grid-c Class)
• Five columns (using the Ui-grid-d Class)

The grid is 100% width, completely invisible (no bounds or background) and no margin or padding, so they don't interfere with the style elements placed inside them. In the grid container, the child elements are assigned ui-block-a/b/c/d in a sequential manner, allowing each "block" element to float in parallel, forming a grid. Where the Ui-block-a class basically clears the float to start a new row (see multi-line grid, below).

Ui-grid-a two Column layout

Create a two-column (50/50%) layout, the first layer (the parent container) adds the Ui-grid-a property, and the second layer (two sub containers) adds ui-block-a and Ui-block-b separately:

<div class= "Ui-grid-a" >
 <div class= "ui-block-a" ><strong>i ' m block a</strong> and text Inside would wrap</div>
 <div class= "ui-block-b" ><strong>i ' m block b</strong> and text Inside'll wrap</div>
</div><!--/grid-a-->

The above markup produces the following layout of the content:

As you can see, the grid is not visually shaped by default;

The grid class can be applied to any container. In the next example, we add a ui-grid-a and apply Ui-block, two buttons that extend to 50% of the screen width

<fieldset class= "Ui-grid-a" >
 <div class= "ui-block-a" ><button type= "Submit" Data-theme= "C" > cancel</button></div>
 <div class= "ui-block-b" ><button type= "Submit" Data-theme= "B" > Submit</button></div>  
</fieldset>

Note that this frame adds the left and right margin buttons in the grid. For a single button, you can use the class Ui-grid-solo and Button class Ui-block-a, like the following example of a Div. Such a button will get the same margin

<div class= "Ui-grid-a" >
 <div class= "ui-block-a" ><button type= "button" Data-theme= "C" > previous</button></div>
 <div class= "ui-block-b" ><button type= "button" Data-theme= "C" > next</button></div>  
</div>
<div class= "Ui-grid-solo" >
 <div class= " Ui-block-a "><button type=" V "data-theme=" B ">More</button></div>
</div>

Theme classes (without data subject attributes) can be added to an element from the theme system, including the grid. In the following block, we added two classes: Ui-bar Add the default bar and UI-BAR-E apply background gradients and font style to the "E" toolbar theme samples. For purposes of illustration, an inline style= "height:120px" attribute is also added to each grid setting for each standard height.

Ui-block-b three-column layout

The grid layout configuration uses class= ui-grid-b The elements of the parent and 3 child containers, each with its own ui-block-a/A/C class, creating a row of three column layouts (33/33/33%). Note: These blocks of the same style theme course, the grid layout is clearly visible.

<div class= "Ui-grid-b" >
 <div class= "ui-block-a" >block a</div> <div class=
 "Ui-block-b" >block b</div>
 <div class= "ui-block-c" >block c</div>
</div><!--/grid-b-- >

This for our content, will produce a 33/33/33% grid layout

Ui-block-c Four Column Layout

Row four columns, 25/25/25/25% grid, are specified class= ui-grid-c and add One-fourth blocks in the parent container. Note: These blocks have the same style of subject course, the grid layout is clearly visible

Ui-block-c Five Column Layout

A row of five columns, 20/20/20/20/20% grid, is specified by the parent container class= ui-grid-d

Multiple-row multiple-column layout

The grid design wraps multiple lines of items. For example, if you specify a three-row three-column grid (UI-GRID-B) in a container with nine child blocks, swap to 3 rows of 3. There is a CSS rule that explicitly floats and starts a new line when class= Ui-block-a is sure to map to the grid type in a repeating sequence allocation block (A,b,c class, A,b,c, etc.). The first container of each row can be set to class=ui-block-a to clear the float, so that the class for the 9 child containers should be: class=ui-block-(a,b,c,a,b,c,a,b,c).

<div id= "Grid" class= "Ui-grid-b" > <div class= "ui-block-a" ><div class= "Ui-bar ui-bar-e
" >A</ div></div>
<div class= "ui-block-b" ><div class= "Ui-bar ui-bar-e" >b</div></div >
<div class= "ui-block-c" ><div class= "Ui-bar ui-bar-e" >C</div></div>
<div class= "Ui-block-a" ><div class= "Ui-bar ui-bar-e" >A</div></div>
<div class= "Ui-block-b" ><div class= "Ui-bar ui-bar-e" >B</div></div> <div class= "ui-block-c" ><div class= "
Ui-bar ui-bar-e ">C</div></div>
<div class=" ui-block-a "><div class=" Ui-bar ui-bar-e " >A</div></div>
<div class= "ui-block-b" ><div class= "Ui-bar ui-bar-e" >B</div> </div>
<div class= "ui-block-c" ><div class= "Ui-bar ui-bar-e" >C</div></div>
</div>

<!doctype html>