Switch between multiple pages on the same page, and switch between multiple pages on the same page
Today, I came into contact with JQ Mobile. The following is the understanding of Ben Xiaobai (not afraid of jokes ):
Create a framework for mobile web applications; apply to all popular smartphones and tablets; upgrade the concept of "Writing less and doing more" to a new level: it automatically designs an easy-to-use interaction appearance for webpages and Maintains consistency across all mobile designs.
From the official website, we can see that jQuery mobile is divided into four parts:
JQM consists of four parts:
(1) Page & Navigation
(2) CSS Framework
(3) Widgets (widget)
(4) Form Widgets
You can download the following files from the official website:
CSS file: jquery.mobile.css
JQuery file: jquery. js
JQuery Mobile file: jquery. mobile. js
This time, the main contact is the page and page switching effect.
In jQM, "Page (Page)", "Page" in jqm refers to "one screen content" in WebApp-only one Page (single Page template) can be declared in an HTML file ), you can also declare multiple pages (Multi-Page templates). A browser can display up to one Page at a time!
Basic Structure of a Page:
<Div/section data-role = "page">
<Div/header data-role = "header"> </div/header>
<Div/section class = "ui-content"> </div/section>
<Div/footer data-role = "footer"> </div/footer>
</Div>
There are two ways to jump between multiple pages:
(1) hyperlink:
<A href = "# PageID/xx.html"> </a>
(2) JS Code:
<Button onclick = "$. mobile. changePage ('# PageID/xx.html');"> </button>
Common data-* attributes in jQM: |
Data-role = "page" |
Data-role = "header" |
Data-role = "content" |
Data-role = "footer" |
Data-theme = "a/B" is used for any element to set the subject color of the current element. |
Data-position = "fixed" is used for footer, which is fixed at the bottom of the Page. |
Data-title = "" For Page, specifying the title bar content of the current Browser |
Data-rel = "back" is used for hyperlinks and can be returned to the previous Page of the current Page. |
Data-transition = "ten possible values" is used for page Jump hyperlinks, specifying page switching transfer Animation |
Data-role = "button" is used for hyperlinks to display the appearance of block-level buttons. |
Data-inline = "true" is used for buttons, declared as intra-row buttons, essentially adding. ui-btn-inline |
Data-icon = "50 icons" can be used to specify icons for buttons |
Data-iconpos = "left/right/top/bottom/notext" |
The following is a case study:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
<Link rel = "stylesheet" href = "jqm/jquery.mobile-1.4.5.css"/>
<Script src = "js/jquery-1.11.3.js"> </script>
<Script src = "jqm/jquery. mobile-1.4.5.js"> </script>
</Head>
<Body>
<Div data-role = "page" id = "p21.">
<Div data-role = "header">
<H1> header-p21. </Div>
<Div class = "ui-content">
<H1> an HTML page contains multiple pages <H2> p21-1page <A href = "# p22"> jump to the second page </a>
<Button onclick = "$. mobile. changePage ('# p23')"> jump to the third page-p23 </button>
</Div>
<Div data-role = "footer">
<H1> tail </Div>
</Div>
<Div data-role = "page" id = "p22">
<Div data-role = "header">
<H1> header-p22 </Div>
<Div class = "ui-content">
<H2> p22-second page <A href = "# p23"> jump to the third page </a>
</Div>
<Div data-role = "footer">
<H1> tail </Div>
</Div>
<Div data-role = "page" id = "p23">
<Div data-role = "header">
<H1> header-p23 </Div>
<Div class = "ui-content">
<H2> p23-Third page <A href = "#" data-rel = "back"> return to the previous page </a>
</Div>
<Div data-role = "footer">
<H1> tail </Div>
</Div>
</Body>
</Html>
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
