Home > Developer > JavaScript
1. In JQuery MobileTo switch between multiple pages, use the <a> element and set the
2. Sample Code for multi-page Switching:
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">
<Header data-role = "header"> <Div data-role = "content" class = "content">
<P> This is the homepage. </p>
<P> <a href = "# page2"> details </a> </p>
</Div>
<Footer data-role = "footer"> </Section>
<Section id = "page2" data-role = "page">
<Header data-role = "header"> <Div data-role = "content" class = "content">
<P> here is the details page </p>
<P> <a href = "# page1"> back to homepage </a> </p>
</Div>
<Footer data-role = "footer"> </Section>
</BODY>
</HTML>
3. Preview:
Click the details page to switch to another page:
4. In addition to internal linksAnd external links. The implementation method is the same as the internal link, but another rel attribute is added in <a> and the attribute value is set to external to indicate external links, for example:
Copy codeThe Code is as follows:
<A href = "a1.html" rel = "external"> details </a>
5. animation effect switching pageTo add the data-transition attribute in <a>, for example:
Copy codeThe Code is as follows:
<A href = "a1.html" rel = "external" data-transition = "pop"> details page </a> // open the page with a pop-up effect
Slide: animated effect sliding from right to left
Pop: Open the page with the pop-up effect
Slideup: The Animated Effect of sliding up
Slidedown: animation effect sliding down
Fade: gradient fading effect
Flip: Flying Effect
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
