”;
The user can interact with jQuery Mobile pages, which groups the content into logical views and page views. Page view can be animated using page transitions. Multiple pages can be created using HTML document and therefore, there is no need of requesting the content from the server.
Following table demonstrates the types of pages in detail.
| Sr.No. | Type & Description |
|---|---|
| 1 | Single Page
A single page is created in HTML document using a standard way of writing a template. |
| 2 | Multi-Page Template
Multiple pages can be included in the single HTML document, which loads together by adding multiple divs with data-role = “page”. |
| 3 | Dialogs Page
Modal dialogs open content in an interactive overlay above the page. |
Conventions, not requirements
-
The data-role attribute elements such as the header, footer, page, and content are used to provide the basic format and structure of a page.
-
For single page documents, the page wrapper was required for auto-initialization is set as optional.
-
The structural element can be excluded for a webpage with custom layout.
-
To manage pages, the page wrapper is injected by the framework when it is not included by the markup.
Prefetching pages
Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. For more information click here.
DOM Cache
When the browser memory gets full in DOM, then it slow downs the mobile browser or might crash due to loading of multiple pages. There is a simple method to keep the DOM tidy −
-
When a page is loaded via ajax, then it indicates to remove the page from DOM when you redirect to another page.
-
The previous page which you have visited can be retrived from the cache when you revisit it.
-
Instead of removing the pages, you can tell jQuery mobile to keep it in DOM by using the following line −
$.mobile.page.prototype.options.domCache = true;
-
Set the domCache option as true on the page plugin to keep all the pages in the DOM, which was visited previously.
pageContainerElement.page({ domCache: true });
”;