diff --git a/docs/pages/docs-link-scenarios.html b/docs/pages/docs-link-scenarios.html new file mode 100755 index 00000000..45e843f7 --- /dev/null +++ b/docs/pages/docs-link-scenarios.html @@ -0,0 +1,40 @@ + + + + jQuery Mobile Docs - Pages + + + + + +
+ +
+

Linking pages

+
+ +
+ +

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.

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