Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-14 01:23:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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.

Browse source 
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
This commit is contained in:
scottjehl 2010-10-23 17:24:06 -04:00
parent 6f5ce29175
commit e736caebfe
2 changed files with 69 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
docs/pages/docs-link-scenarios.html Executable file
View file

@ -0,0 +1,40 @@
<!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>

66
js/jquery.mobile.js
View file

@ -104,47 +104,39 @@
$('#ui-base').attr('href', baseUrl); $('#ui-base').attr('href', baseUrl);
} }
//click routing - direct to HTTP or Ajax, accordingly
// send a link through hash tracking jQuery( "a" ).live( "click", function(event) {
jQuery.fn.ajaxClick = function() { var $this = $(this),
var href = jQuery( this ).attr( "href" ); //get href, remove same-domain protocol and host
pageTransition = jQuery( this ).data( "transition" ) || "slide"; href = $this.attr( "href" ).replace( location.protocol + "//" + location.host, ""),
forceBack = jQuery( this ).data( "back" ) || undefined; //if it still starts with a protocol, it's external, or could be :mailto, etc
nextPageRole = jQuery( this ).attr( "data-rel" ); external = /^\w+:|#/.test( href ) || $this.is( "[target],[rel=external]" ),
nullLink = href == '#';
//find new base for url building
var newBaseURL = getBaseURL(); if( nullLink ){
//for links created purely for interaction - ignore
//if href is absolute but local, or a local ID, no base needed return false;
if( /^\//.test(href) || (/https?:\/\//.test(href) && !!(href).match(location.hostname)) || /^#/.test(href) ){
newBaseURL = '';
} }
else if( external ){
// set href to relative path using baseURL and //deliberately redirect, in case click was triggered
if( !/https?:\/\//.test(href) ){ location.href = href;
href = newBaseURL + href;
} }
else {
//if it's a non-local-anchor and Ajax is not supported, or if it's an external link, go to page without ajax //use ajax
if ( ( /^[^#]/.test(href) && !jQuery.support.ajax ) || ( /https?:\/\//.test(href) && !!!href.match(location.hostname) ) ) { var pageTransition = $this.data( "transition" ) || "slide",
location = href forceBack = $this.data( "back" ) || undefined,
} changeHashOnSuccess = !$(this).is(unHashedSelectors);
else{
if( $(this).is(unHashedSelectors) ){ nextPageRole = $this.attr( "data-rel" );
changePage(href, pageTransition, undefined);
} //if it's a relative href, prefix href with base url
else{ if( href.indexOf('/') !== 0 && href.indexOf('#') !== 0 ){
changePage(href, pageTransition, undefined, true); href = getBaseURL() + href;
} }
changePage(href, pageTransition, forceBack, changeHashOnSuccess);
} }
return this; event.preventDefault();
};
// ajaxify all navigable links
jQuery( "a:not([href='#']):not([target]):not([rel='external']):not([href^='mailto:'])" ).live( "click", function(event) {
jQuery( this ).ajaxClick();
return false;
}); });
// turn on/off page loading message. // turn on/off page loading message.
@ -199,7 +191,7 @@
from = toIsArray ? to[0] : $.activePage, from = toIsArray ? to[0] : $.activePage,
to = toIsArray ? to[1] : to, to = toIsArray ? to[1] : to,
url = fileUrl = $.type(to) === "string" ? to.replace( /^#/, "" ) : null, url = fileUrl = $.type(to) === "string" ? to.replace( /^#/, "" ) : null,
back = (back !== undefined) ? back : (forceBack || ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url )), back = (back !== undefined) ? back : ( urlStack.length > 1 && urlStack[ urlStack.length - 2 ].url === url ),
transition = (transition !== undefined) ? transition : ( pageTransition || "slide" ); transition = (transition !== undefined) ? transition : ( pageTransition || "slide" );
//unset pageTransition, forceBack //unset pageTransition, forceBack