1. In jquery mobile , the switch of multiple pages is through the <a> element, and the
2. Multi-page Switch sample code :
Copy CodeThe code is 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. Preview :
Click on the detail page to switch to another page:
4, in addition to internal links , there are external links, the implementation method is the same as within the link, just add another rel attribute in <a>, and set the attribute value to external to represent the outer chain, such as:
Copy CodeThe code is as follows:
<a href= "a1.html" rel= "external" > detail page </a>
5, Animation effect switch page , just add data-transition attribute in <a>, such as:
Copy CodeThe code is as follows:
<a href= "a1.html" rel= "external" data-transition= "pop" > Detail page </a>//open page with popup effect
Slide: Animation effect with right-to-left swipe
Pop: Open page with pop-up effect
Slideup: Slide up animation effect
Slidedown: Slide down animation effect
Fade: effect of fading fade
Flip: fly-in effects
Get started with jquery Mobile-multi-page Switching sample Learning