In a single-page template application, each page of the application will have its own HTML file. A page is wrapped within a page container as <div data-role="page">
. When you launch the app, the jQuery Mobile framework will load the first page of the app (or the main page) into the DOM, whose reference is held all through the app cycle. The main page just gets hidden when the user navigates to another page, which now is marked as an active page. Except for the main page, all other pages get removed from the DOM when the user navigates away from them. Navigation between the pages is specified using anchor links. The anchor links are decorated as buttons using the data-role="button"
attribute. On clicking any link, navigation occurs with some cool CSS3 transitions, and the new page is pulled in via Ajax.
This recipe shows you how to create a single-page template application and navigate between the pages of the app.