JQuery Mobile Basics

1. Page

JQuery Mobile Applies the features of the HTML5 standard, and the complete page structure in a structured page is divided into three main areas: header, content, footer.
Insert a content block in the body:

<div data-role= "page" > <div data-role= "header" >...</div> <div data-role= "content" >...</ div> <div data-role= "Footer" >...</div> </div>

data-role= "page" means that the div is a page that only displays a page in a screen;
Header is the title, content is the contents block, footer is the footer
Data-role parameter table:
Parameters
Description
Page
A page container whose internal mobile element inherits the properties set on the container.
Header
The page header container, which can contain elements such as text, return buttons, function buttons, etc.
Footer
Page Footer container, inside the container can also contain text, return buttons, function buttons and other elements
Content
Page Content container, this is a very tolerant container, inside can contain standard HTML elements and Jquerymobile elements
Controlgroup
Set several elements into a group, typically several of the same element types
Fieldcontain
Zone wrapping container, which separates the elements inside the container from the elements outside the container by increasing the margins and dividing the lines
NavBar
Functional navigation container, popular speaking is the tool bar
Listview
List display container, similar to the way the contact list is displayed on the phone
List-divider
The table header of the list display container, which is used to show the title of a set of lists that cannot contain links inside
button
button to set the style of the link and the normal button to be the Jquerymobile style
None
Prevents frames from rendering elements so that they appear in the native HTML state, primarily for form elements.

JQuery Mobile Basics