jquery-mobile/docs/pages/docs-link-scenarios.html
scottjehl e736caebfe Removed the ajaxClick function and moved its logic into the live click event handler, where it is now refactored and simplified. Thx to Jeffrey Way for ideas that went into this refactor.
Also, clicks that are triggered on anchors will now be able to make a new http request, which improves listview behavior when clicking LIs that resolve to external urls.

Included in commit is a new demo/test page with various link types to make sure they behave as expected.

Fixes #272, Fixes #264
2010-10-23 17:24:06 -04:00

40 lines
1.6 KiB
HTML
Executable file

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Pages</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Linking pages</h1>
</div><!-- /header -->
<div data-role="content">
<p>jQuery Mobile is designed to work with simple page linking conventions. The following list demonstrates how different types of links will be handled, either remotely or through an Ajax Request.</p>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Examples of links that work within a single-page (if the page exists)</li>
<li><a href="docs/pages/index.html">[href="docs/pages/index.html"]</a></li>
<li><a href="/docs/toolbars/index.html">[href="/docs/toolbars/index.html"]</a></li>
<li><a href="#somelocalID">[href="#somelocalID"]</a></li>
<li>Note: an full URL to the same-domain will also work</li>
<li data-role="list-divider">Examples of links that trigger a refresh</li>
<li><a href="docs/pages/index.html" rel="external">[rel="external"]</a></li>
<li><a href="docs/pages/index.html" target="_blank">[target="_blank"]</a></li>
<li><a href="mailto:john@doe.com">[href="mailto:john@doe.com"]</a></li>
<li><a href="tel:543-434-3454">[href="tel:543-434-3454"]</a></li>
<li><a href="http://google.com">[href="http://google.com"]</a></li>
<li data-role="list-divider">Links that return false</li>
<li><a href="#">[href="#"]</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>