Loading Method of JQueryMobile page

1. JQM page Structure jQueryMobile uses the data-role attribute to differentiate rendering interface styles. The data-role table provided in JQM is as follows: parameter description page container, the internal mobile element will inherit the property header page title Container set on the container, in this container... syntaxHighli

1. JQM Page Structure

 

JQuery Mobile uses the data-role attribute to differentiate rendering interface styles. The data-role provided in JQM is shown in the following table:

Parameters
Description
 
Page
Page container, its internal mobile element will inherit the properties set on this container
 
Header
Page title container, which can contain text, return buttons, function buttons, and other elements
 
Footer
Page footer container, which can also contain text, return buttons, function buttons, and other elements
 
Content
The page content container is a very tolerant container that can contain standard html elements and jQueryMobile elements.
 
Controlgroup
Set several elements into a group. Generally, they are of the same element type.
 
Fieldcontain
Area package container. The elements inside the container and outside the container are obviously separated by adding margins and split lines.
 
Navbar
Function navigation container.
 
Listview
The list display container is similar to the display method of the contact list in the mobile phone.
 
List-divider
The List displays the container header, which is used to display the title of a group of lists and cannot contain links.
 
Button
Button to set the style of the link and normal button to the jQueryMobile Style
 
None
Prevents the framework from rendering elements so that the elements are displayed in the html native state. It is mainly used for form elements.
 

JQuery Mobile applies the HTML5 standard features. In a structured page, the complete page structure is divided into three main areas: header, content, and footer.

Insert a content block into the body:

...

...

...

Data-role = "page" indicates that this div is a Page and only one page is displayed on the screen;

The header is the title, the content is the content block, and the footer is the footer.

 

2. JQM ajax Loading Method

JQuery Mobile implements the ajax Loading Mode for pages to reduce the volume of page loading data. when a page is loaded using ajax (data-ajax = "true" added to the link tag), only all html content is loaded on the first page, include the style script file referenced in the html head. Only the content of the div container of data-role = "page" is loaded on the page that is loaded later, therefore, the script (javascript) on a non-first loaded page must be written in the div container of data-role = "page.