I. File Reference:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
<LINK rel = "stylesheet" href = "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<SCRIPT src = "http://code.jquery.com/jquery-1.5.min.js"> </SCRIPT>
<SCRIPT src = "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"> </SCRIPT>
Ii. Pages
In the <body> label, each view or "page" of a mobile website must be defined by the data-role = "page" attribute label.
<Div data-role = "page">... </div>
In the page container, any valid HTML tag can be used, but for a typical page of jquery mobile, the direct child node of the page container should be the three containers marked with "data-role" as "Header" content "and" footer.
<Div data-role = "page">
<Div data-role = "Header">... </div>
<Div data-role = "content">... </div>
<Div data-role = "footer">... </div>
</Div>
Template structure of multiple pages multi-Page Template Structure
An independent HTML file can contain multiple "pages". When loading, the data-role = "page" div is loaded together with the stack. Each page block needs to be marked by a unique ID (ID = "foo"). By defining the internal link address as (herf = "# foo"), the block jumps to each other. When a connection is clicked, jqmoblie searches for the page container with an ID in the document, and then displays it through the page transition.
Code:
1 <!-- Start of first page --> 2 <div data-role="page" id="foo"> 3 <div data-role="header"> 4The above code is for three pages.
Demo:
Single-page, multi-page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
