- jQuery Mobile - Data Attributes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Themes
- jQuery Mobile - Forms
- jQuery Mobile - Events
- jQuery Mobile - Widgets
- jQuery Mobile - Layouts
- jQuery Mobile - Transitions
- jQuery Mobile - Icons
- jQuery Mobile - Pages
- jQuery Mobile - Setup
- jQuery Mobile - Overview
- jQuery Mobile - Home
jQuery Mobile Useful Resources
- jQuery Mobile - Discussion
- jQuery Mobile - Useful Resources
- jQuery Mobile - Quick Guide
- jQuery Mobile - Interview Questions
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery Mobile - Pages
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 | A single page is created in HTML document using a standard way of writing a template. |
2 | Multiple pages can be included in the single HTML document, which loads together by adding multiple spans with data-role = "page". |
3 | 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-initiapzation 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
.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 pne −
$.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 });Advertisements