Easy HTML5-jquery mobile pages & dialogs

 

The storm of jquery in the Web JS framework continues, but it is moving towards mobile with mobile terminals. So what exactly does jquery mobile include?

Introduction

A page in jquery mobile is not the same as an HTML page. It is a div of a page container Based on it. This allows us to create multiple page pages in another HTML file, the advantage is that after the client sends a request, it only needs to request the HTML content once. Other functions and operations are already on the client. Besides, HTML is only a framework structure, content operations must be based on JS Ajax requests, so that users can experience the experience of a common website. Of course, if a large number of HTML tags are returned to the client in the first request, the request will be slow, slow rendering and other issues; therefore, we need to make appropriate division, and the HTML content to be rendered for the first time should be as few as possible (jquery template is recommended); and the Framework supports multiple pages, when switching between multiple pages, you can also display the page as a dialog box;

The difference is that the process of linking external pages, linking the "page" of the same page, backward, redirection, and directory links are different. This will be detailed below;

Page

Jquery mobile is based on HTML5, And the jquery mobile website must start with the HTML5 Document declaration. We need to use its theme CSS, therefore, you need to reference the corresponding theme CSS style file and JS library in the page title; of course, the specific reference path depends on how these files are organized;

<! Doctype HTML> "  Viewport  " Content = "  Width = device-width, initial-scale = 1  " > <Link href = "  ../CSS/jquery.mobile.structure-1.1.0.css  " Rel = "  Stylesheet  " Type = "  Text/CSS  " /> <Link href = "  ../Theme/lightgray/eh_lightgray.css  " Rel = "  Stylesheet  " Type = "  Text/CSS  " /> <Link href = "  ../CSS/common.css  " Rel = "  Stylesheet  " Type = "  Text/CSS  " /> <SCRIPT src = "  ../JS/jquery-1.7.2.js  " Type = "  Text/JavaScript  " > </SCRIPT> <SCRIPT src = "  ../JS/jquery. mobile-1.1.0.js  " Type = "  Text/JavaScript " > </SCRIPT> 
 
 
 

 
Jquery mobile's "page" is a div container with data-role = "page, generally, this container has three direct Div subnodes marked with data-role = "Header", data-role = "content", and data-role = "footer; this is mainly to divide the page container into three parts: Header, content, and foot. Then, the developer adds other content to different parts;
 

<! Doctype HTML>  "  Viewport  " Content = "  Width = device-width, initial-scale = 1  " > <Link href ="  ../CSS/jquery.mobile.structure-1.1.0.css  " Rel = "  Stylesheet  " Type = "  Text/CSS  " /> <Link href = "  ../Theme/lightgray/eh_lightgray.css  " Rel = "  Stylesheet  " Type ="  Text/CSS  " /> <Link href = "  ../CSS/common.css  " Rel = "  Stylesheet  " Type = "  Text/CSS  " /> <SCRIPT src = "  ../JS/jquery-1.7.2.js  " Type ="  Text/JavaScript  " > </SCRIPT> <SCRIPT src = "  ../JS/jquery. mobile-1.1.0.js  " Type = "  Text/JavaScript  " > </SCRIPT>  "  Page  " > <Div data-role = "  Header " > <H1> easy hotel  "  Content  " > <P> page content goes here. </P> </div> <! --/Content --> <Div data-role = "  Footer  " > <H4> & copyjohnny2012 mail: Johnny @ 163 . Com </H4> </div> <! --/Footer --> </div> <! --/Page --> </body> 
 
 
 

 
In this way, it has an effect. This is a simple page;
 

 

 
 
 
How are multiple pages of internal links?
 
Since every page is just a div with data-role = "page", we have to create a few more pages, you only need to add the ID attribute to the DIV of each page. When linking, href is set to # pageid.
 

 View code 
 
 

<Div id = "  Pagesearch  " Data-role = "  Page  " > <Div data-role = "  Header  " > <H1> easy hotel "  Content  " > <A href = "  # Pagelist  " > List page </a> </div> <! --/Content --> <Div data-role = "  Footer  " > <H4> easy hotel </H4> </div> <! --/Footer --> </div> <! --/Page --> <Div id = "  Pagelist  " Data-role ="  Page  " > <Div data-role = "  Header  " > <H1> hotel list  "  Content  " > <A href = "  # Pagedetail  " > Detail page </a> </div> <! --/Content --> <Div data-role ="  Footer  " > <H4> easy hotel </H4> </div> <! --/Footer --> </div> <! --/Page --> <Div id = "  Pagedetail  " Data-role = "  Page  " > <Div data-role = "  Header  " > <H1> hotel detail  "  Content  " > <P> detail page </P> </div> <! --/Content --> <Div data-role = "  Footer  " > <H4> easy hotel </H4> </div> <! --/Footer --> </div> <! --/Page -->
 
 
 

 
The above is the inner link. When the link is clicked, jquery moblie searches for the page container with the ID in the document and then displays the result;
 
External link
Jqueyr mobile automatically constructs Ajax-driven sites and applications when loading external links (linking to another Independent Application page file). By default, When you click a site pointing to an external page (for example: http://www.cnblogs.com/yoainet/archive/2012/04/27/2473647.html), JQ moblie analyzes the link address, then generates an Ajax request (hajax), displaying a prompt box for reading. If the Ajax request is successful, the content of the new page will be added to the Dom, and all mobile components will be automatically initialized, so the new page will be displayed through the display animation; if the Ajax request fails, JQ moblie will display a small error prompt box (the default topic is E), and then it will disappear after a while, without affecting your browsing;
 
Back Link
 
If you want the button to have the backend function, you only need to set the data-rel = "back" attribute for it, and ignore its href link, and then return to the previous page of the browser;
 

 
<A data-role ="Button"Data-rel ="Back"Href ="# Pagedetail"Data-Icon ="Back"> Back </a>
 
 
 
Page Switching Effect
 
To define the page switching effect, you only need to add the corresponding data-transition on the link. The default effect is fade;
 

 
 

 
<A href ="# Pagelist"Data-transition ="Slide"> List page </a> <br/>
 
 
In this way, you can see that the page changes to pull when switching the validity period;
 

 
 
 

 
Instance code