1. In jquery mobile , multiple pages are switched through the <a> element, and the
2. Multi-page Switching sample code :
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "viewport" content= "width=device-width,initial-scale=1"/>
<link href= "Css/jquery.mobile-1.2.0.min.css" rel= "Stylesheet" type= "Text/css"/>
<script src= "js/jquery-1.8.3.min.js" type "Text/javascript" ></script>
<script src= "Js/jquery.mobile-1.2.0.min.js" type= "Text/javascript" ></script>
</HEAD>
<BODY>
<section id= "Page1" data-role= "page" >
<div data-role= "Content" class= "Content" >
<p> This is home </p>
<p><a href= "#page2" > Detail page </a></p>
</div>
<footer data-role= "Footer" ></section>
<section id= "Page2" data-role= "page" >
<div data-role= "Content" class= "Content" >
<p> here is the detail page </p>
<p><a href= "#page1" > Back home </a></p>
</div>
<footer data-role= "Footer" ></section>
</BODY>
</HTML>
3, the effect chart preview：
Click the detail page to switch to another page:
4, in addition to internal links , there are external links, the implementation method and the same link, just added a Rel property in <a>, and set the property value to external to represent the chain, such as:
Copy Code code as follows:
<a href= "a1.html" rel= "external" > detail page </a>
5, Animation effect switch page, simply add the Data-transition attribute in <a>, such as:
Copy Code code as follows:
<a href= "a1.html" rel= "external" data-transition= "pop" > Detail page </a>//Open page with pop-up effect
Slide: Sliding from right to left animation effect
POPs: Opening a page with a pop-up effect
Slideup: Slide up the animation effect
Slidedown: Sliding down animation effect
Fade: Gradient Fade effect
Flip: The effect of flying into
