mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 06:50:23 +00:00
50 lines
No EOL
2.8 KiB
HTML
Executable file
50 lines
No EOL
2.8 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Links</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script src="../../js/jquery.js"></script>
|
|
<script src="../../js/"></script>
|
|
<script src="docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header" data-theme="b">
|
|
<h1>Link formats</h1>
|
|
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<p>All standard HTML link types are supported in jQuery Mobile. To make the experience as polished as possible, any links to pages within the same domain will be automatically turned into Ajax requests and displayed with an animated page transition by the framework. </p>
|
|
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax and will cause a full page refresh. If multiple "pages" are contained within a single HTML document, they can be linked by referencing the ID of the page as an anchor (#foo).</p>
|
|
<p>All other types of links like <code>mailto:</code> and <code>tel:</code> aren't impacted by the framework and will work as expected. Learn more about the <a href="docs-navmodel.html">linking and navigation model</a> in jQuery Mobile</p>
|
|
|
|
<ul data-role="listview" data-inset="true">
|
|
<li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>
|
|
<li><a href="../../index.html">Link in the same domain</a></li>
|
|
<li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>
|
|
<li data-role="list-divider">Links that will refresh the page</li>
|
|
<li><a href="http://www.jquery.com">External domain</a></li>
|
|
<li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
|
|
<li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
|
|
<li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
|
|
<li data-role="list-divider">Email links</li>
|
|
<li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
|
|
<li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>
|
|
|
|
<li data-role="list-divider">Phone links</li>
|
|
<li><a href="tel:15555555555">Phone: tel:15555555555</a></li>
|
|
<li data-role="list-divider">Other</li>
|
|
<li><a href="#">A href="#" will return false</a></li>
|
|
</ul>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |