It’s important to note that the title of an internal page will be set according to the following order of precedence:
- If a
data-ti2–tle
value exists, it will be used as the title for the internal page. For example, the title for“multi-page.html#home”
will be set to“Home”
. - If no
data-title
value exists, the header will be used as the title for the internal page. For example, if nodata-title
attribute existed for"multi-page.html#home"
, the title would be set to"Welcome Home"
, the value of itsheader
tag. - Lastly, if neither a
data-title
nor header exists on the internal page the title element within the head tag will be used as the title for the internal page. For example, if nodata-title
attribute and no header existed for"multi-page.html#home
“, the title would be set to"Multi Page Example"
, the value of the parent document’s title tag.
IMPORTANT: When linking to a page that contains multiple pages, you must add rel="external"
to its link.
<!-- Must include rel="external" when linking to multi-page documents -->
<a href="multi-page.html" rel="external">Home</a>
<!-- May optionally use the target attribute -->
<a href="multi-page.html" target="_blank">Home</a>
This will perform a full-page refresh. It is required because jQuery Mobile cannot load a multi-page document into the DOM of an active page. It would cause a namespace collision with how jQuery Mobile leverages the URL hash (#). jQuery Mobile leverages the hash value to identify internal pages within a multi-page document.
Additionally, because jQuery Mobile leverages the hash to identify unique pages within the DOM it is not possible to leverage the anchor tag bookmark feature (index.html#my-bookmark
). jQuery Mobile treats my-bookmark
as a page identifier, not a bookmark. Ajax-Driven Navigation will be discussed in greater detail in the next section.
Leave a Reply