


Detailed explanation of the use of ui-grid grid layout in jQuery mobile page development_jquery
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 -->
The above tag produces the following content layout:
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>
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>
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.
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 -->
This will produce a 33 / 33 / 33% grid layout for our content
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
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
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>
<!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>

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

According to news on July 23, blogger Digital Chat Station broke the news that the battery capacity of Xiaomi 15 Pro has been increased to 6000mAh and supports 90W wired flash charging. This will be the Pro model with the largest battery in Xiaomi’s digital series. Digital Chat Station previously revealed that the battery of Xiaomi 15Pro has ultra-high energy density and the silicon content is much higher than that of competing products. After silicon-based batteries are tested on a large scale in 2023, second-generation silicon anode batteries have been identified as the future development direction of the industry. This year will usher in the peak of direct competition. 1. The theoretical gram capacity of silicon can reach 4200mAh/g, which is more than 10 times the gram capacity of graphite (the theoretical gram capacity of graphite is 372mAh/g). For the negative electrode, the capacity when the lithium ion insertion amount reaches the maximum is the theoretical gram capacity, which means that under the same weight

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

"Operation Delta" will launch a large-scale PC test called "Codename: ZERO" today (March 7). Last weekend, this game held an offline flash mob experience event in Shanghai, and 17173 was also fortunate to be invited to participate. This test is only more than four months away from the last time, which makes us curious, what new highlights and surprises will "Operation Delta" bring in such a short period of time? More than four months ago, I experienced "Operation Delta" in an offline tasting session and the first beta version. At that time, the game only opened the "Dangerous Action" mode. However, Operation Delta was already impressive for its time. In the context of major manufacturers flocking to the mobile game market, such an FPS that is comparable to international standards

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Recently, Honor Mobile held a new product launch conference and officially launched the Honor Magic6RSR Porsche Design. On March 22, CNMO learned that the Honor Magic 6 RSR Porsche Design was officially launched for sale, with only a 24GB+1TB version available for 9,999 yuan. Honor Magic6 RSR adopts a Porsche design appearance, inspired by the classic elements of Porsche super sports cars. The back line design is inspired by the Porsche flying line design, and the camera module adopts the iconic hexagonal design, giving the product a distinct three-dimensional and dynamic feel. In addition, the product is available in two colors, agate gray and iceberry pink, which are color-tuned by Porsche original masters, further highlighting its unique design beauty. In terms of screen technology, Honor Magic6RSR maintains
