jquery Mobile Primer-External link switching sample code _jquery

Source: Internet
Author: User
1. Internal link is by setting the HREF attribute value to #+id in the <a> label, the outer chain is to add the Rel attribute in <a> and set the property value to external, such as: <a href= "about.html" rel= " external ">3i studio</a>
2, external link switch sample code:
Copy Code code as follows:

<! DOCTYPE HTML >
<! 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><a href= "#w1" > Today </a></p>|
<p><a href= "#" > Tomorrow </a></p>
</div>
<footer data-role= "Footer" ></section>
<section id= "W1" data-role= "page" data-add-back-btn= "true" >
<div data-role= "Content" class= "Content" >
<p>4~7 ' c<br/> Sunny Turn cloudy <br/> Breeze </p>
<em style= "float:right;padding:5px" >
<a href= "about.html" rel= "external" >3i studio</a> provided
</em>
</div>
<footer data-role= "Footer" ></section>
</BODY>
</HTML>

External file about.html code:
Copy Code code as follows:

<! DOCTYPE HTML >
<! 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" data-add-back-btn= "true" >
<div data-role= "Content" class= "Content" >
<p>3i Studio is a technical team dedicated to entrepreneurial innovation </p>|
</div>
<footer data-role= "Footer" ></section>
</BODY>
</HTML>

3, the effect Chart preview:

Click 3i Studio for external links:

4, to return to the previous page, add the Data-rel property to the <a> tab and set the property back, such as: <a data-rel= "Back" > Return to the previous page </a>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.