Setting the Page Title of an Internal Page

It’s important to note that the title of an internal page will be set according to the following order of precedence:

  1. 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”.
  2. If no data-title value exists, the header will be used as the title for the internal page. For example, if no data-title attribute existed for "multi-page.html#home", the title would be set to "Welcome Home", the value of its header tag.
  3. 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 no data-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.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *