This chapter is from the book
This chapter is from the book
This chapter is from the book
Single-Page Template
Single-page templates are separate HTML files that act as independent webpages, just like any standard webpage. The main difference is in how jQuery Mobile connects webpages using Ajax. As with multipage templates, the Ajax-based navigation in single-page templates uses hashtags to create a page history. The Ajax-based navigation used by jQuery Mobile is the default, but it can be turned off by setting the ajaxEnabled setting to false in the configuration. You’ll learn more about the configuration settings later in this book.
Ajah is an abbreviation that is sometimes used for Asynchronous JavaScript and HTML. Ajah is essentially Ajax without the XML; the XMLHttpRequest is still used, but HTML is exchanged with the server rather than XML. This is what jQuery Mobile uses as the user browses independent webpages. We briefly covered how the jQuery Mobile framework uses the XMLHttpRequest to load subsequent pages in the previous chapter, but there’s a lot to learn and understand about this simple request.
One great thing about the jQuery Mobile framework is how it tracks history: it supports the back and forward buttons! Also, while subsequent pages load, the framework provides a default loading message and transitions between pages. The default page transition is to slide between two pages, and the default loading message is a spinning icon with a “loading...” message. Both options are configurable, as you’ll learn in the next chapter. For now, let’s see how hashtags and history work in jQuery Mobile.
Hashtags and history
jQuery Mobile uses hashtags to manage history in single- and multipage templates. The window object’s location.hash is used to make changes and updates to the history, so the back and forward buttons function as usual, which is uncommon in other Ajax-based systems. Essentially, jQuery Mobile prevents the default functionality of all hyperlinks and uses the hashtag functionality to handle history. Not only is the history updated, the hashtag system also creates a valid URL that can be bookmarked for later reference.
The only issue with jQuery Mobile’s hashtag-based navigation is that it doesn’t support deep linking. However, there are some workarounds you can use to support this functionality. With a little help from jQuery, you can add a script, like the following, to your webpage and your deep links will function as usual:
$(document).ready(function() {
$('a[href^="#"]').bind('click vclick', function () {
location.hash = $(this).attr('href');
return false;
});
});
In HTML, all hyperlinks that include a pound sign (#) as their first character are identified as anchors. This script uses a regular expression that includes the caret symbol to identify all anchor elements that have an href attribute with a value that begins with the pound sign. Once these elements have been selected, you can use the bind method to bind a click and vclick event to the anchor tags and assign an anonymous function handler as the callback.
The callback function sets the window object’s location.hash to the value of the anchor and returns false to prevent the browser from performing the default action associated with clicking the hyperlink.
NOTES
The caret (^) symbol is often used in regular expressions to designate the beginning of a string.
The vclick event is an option used in jQuery Mobile by devices that support touch events. The event supports faster page changes and during page transitions it keeps the address bar hidden.
Hyperlinking from single-page to multipage templates with Ajax enabled will load only the first page in the source code of the multipage template. To link to a multipage template from a single-page template, you must use an external hyperlink by using rel="external" or data-ajax="false".