Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the role of Pages and Dialogs in HTML 5". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the role of Pages and Dialogs in HTML 5"?

Page

Jquery Mobile is based on HTML5, and Jquery Mobile websites must start with HTML5 documents; we need to use its theme css, so we need to refer to the corresponding theme css style files and js libraries in the page Title; of course, the specific reference path depends on how these files are organized.

Easy Hotel

Jquery Mobile's "Page" is a div container with data-role= "page". This container usually has three direct div child nodes and is marked with data-role= "header", data-role= "content" and data-role= "footer" respectively. This is mainly to divide the Page container into three pieces: head, content and foot. Then the developer adds other content to different blocks. Here you can see all the attribute tags that you can use.

Easy Hotel Easy Hotel

Page content goes here.

& copyJohnny2012 Mail:johnny@163.com

So it already works, and this is a simple Page page.

How to have multiple pages of internal links

Since each page is just a div with data-role= "page", let's create a few more on our page; as to how they are linked to each other, you only need to add the ID attribute to the div of each Page, and set the href to # pageID when linking.

Easy Hotel List Page Easy Hotel Hotel List Detail Page Easy Hotel Hotel Detail

Detail Page

Easy Hotel

The above is the inner chain. When the link is clicked, Jquery moblie will look for the page container with ID in the document, and then use the effect to display it.

External link

Jqueyr mobile automatically builds AJAX-driven sites and applications when loading external links (links to another stand-alone application page file); by default, when you click on a link to an external page, JQ moblie analyzes the link address and generates an ajax request (Hajax) that displays a reading prompt box. If the AJAX request is successful, the contents of the new page will be added to the DOM and all MOBILE components will be initialized automatically, so the new page will be displayed through animation; if the AJAX request fails, JQ moblie will display a small error prompt box (the default theme is E), and then disappear after a while, which will not affect your continued browsing

Back link

When you want the button to have a back function, just set the data-rel= "back" property to it, ignore its href link, and go back to the previous page of the browser.

Back

Page switching effect

To define the page switching effect, you only need to add the corresponding data-transition to the link. The default effect is fade.

List Page thank you for reading, the above is the content of "what is the role of Pages and Dialogs in HTML 5". After the study of this article, I believe you have a deeper understanding of the role of Pages and Dialogs in HTML 5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.