Home > Web Front-end > JS Tutorial > Detailed explanation of the use of ui-grid grid layout in jQuery mobile page development_jquery

Detailed explanation of the use of ui-grid grid layout in jQuery mobile page development_jquery

WBOY
Release: 2016-05-16 15:27:39
Original
1798 people have browsed it

On mobile devices, the screen width is narrow, so multi-column layouts are not usually used, but sometimes you may need to arrange small elements (like buttons or side-by-side navigation labels, for example) in multiple columns. The Jquery Mobile framework provides a simple method to build a CSS-based column layout called ui-grid

Jquery Mobile provides four preset layouts, which can be used in any situation where columns are needed

  • Two columns (using ui-grid-a class)
  • Three columns (using ui-grid-b class)
  • Four columns (using ui-grid-c class)
  • Five columns (using ui-grid-d class)

Grids are 100% width, completely invisible (no borders or background) and have no margin or padding, so they don't interfere with the styling of elements placed inside them. In a grid container, child elements are assigned ui-block-a / b / c / d in a continuous manner, making each "block" element float and juxtapose, forming a grid. The ui-block-a class basically clears the float and will start a new row (see multi-row grid, below).

ui-grid-a two-column layout

Create a two-column (50 / 50%) layout. Add the ui-grid-a attribute to the first layer (parent container), and add ui-block-a and ui-block to the second layer (two sub-containers). -b:

<div class="ui-grid-a">
 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->
Copy after login

The above tag produces the following content layout:

2015123162840041.jpg (828×100)

As you can see, grids have no visual styling by default; they just render content side by side.

Grid classes can be applied to any container. In the next example, we add a ui-grid-a, apply ui-block, and both buttons 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>
Copy after login

2015123162902752.jpg (831×97)

Please note that this framework adds left and right margin to the buttons in the grid. For a single button you can use class ui-grid-solo and button class ui-block-a, like the example below for a div. Such buttons 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>

Copy after login

2015123162921932.jpg (821×138)

Theme classes (without data theme attributes) from the theme system can be added to an element, including grids. In the following block, we added two classes: ui-bar to add the default bar and ui-bar-e to apply the background gradient and font style to the "E" toolbar theme sample. For illustration purposes, an inline style="height:120px" attribute is also added to each grid to set each standard height.

2015123162939675.jpg (816×148)

ui-block-b three-column layout

Grid layout configuration uses class=ui-grid-b on parent and 3 child container elements, each with its respective ui-block-a/a/c class, creating a one-row three-column layout (33/ 33/33%). Note: These blocks share the same style theme as the course, with the grid layout 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 -->
Copy after login

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

2015123162955517.jpg (827×293)

ui-block-c four-column layout

A row of four columns, 25/25/25/25% grid, is achieved by specifying class=ui-grid-c in the parent container and adding quarter blocks. Note: These blocks have the same style of theme courses, the grid layout is clearly visible

2015123163016861.jpg (834×159)

ui-block-c five-column layout

One row and five columns, 20/20/20/20/20% grid, is specified by class= ui-grid-d
in the parent container

2015123163036328.jpg (831×161)

Multi-row and multi-column layout

Grid design wraps items in multiple rows. For example, if you specify a three-row, three-column grid (ui-grid-b) in a container that has nine sub-blocks, it will be swapped to 3 rows of 3 items each. Having a CSS rule clear for floats and starting a new line when class=ui-block-a is to ensure that a repeating sequence of assigned blocks (A,B,C,A,B,C,etc) maps to the grid type. You can set the first container of each row to class=ui-block-a to clear the float, so the classes of the 9 sub-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>

Copy after login

2015123163102847.jpg (827×462)

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>grid-layout demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Grid Layout Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-a">
   <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
   <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
  </div><!-- /grid-a -->
 </div>
</div>
 
</body>
</html>


Copy after login

2015123163121080.jpg (785×211)

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template