Re-org of the linking example page to emphasize the ajax vs. non-ajax…

… behavior.

docs/pages/link-formats.html

@@ -16,21 +16,23 @@ <h1>Link formats</h1>
 	</div><!-- /header -->
 
 	<div data-role="content">
-
-			<ul data-role="listview">
-				<li data-role="list-divider">Relative links</li>
-				<li><a href="../../index.html">Relative link</a></li>
-				<li><a href="../../index.html" rel="external">Relative link: rel="external"</a></li>
-				<li><a href="../../index.html" rel="external" target="foo">Relative link: rel="external", target="foo"</a></li>
-				<li><a href="../pages/dialog.html" data-rel="dialog">Relative link: data-rel="dialog" (not tracked in history)</a></li>
-				<li data-role="list-divider">Absolute links</li>
-				<li><a href="http://www.jquery.com">Absolute link</a></li>
-				<li><a href="http://www.jquery.com" rel="external">Absolute link: rel="external"</a></li>
-				<li><a href="http://www.jquery.com" rel="external" target="foo">Absolute link: rel="external", target="foo"</a></li>
+
+			<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> 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" 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">Mailto with a cc: and bcc:</a></li>
-				<li><a href="mailto:jdoe@foo.com?subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a subject and body pre-filled</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><a href="wtai://wp/mc;15555555555">Phone: wtai://wp/mc;15555555555</a></li>