# jQuery Mobile Pages: A Comprehensive Guide jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet, and desktop devices. This tutorial covers the core concept of jQuery Mobile: **Pages**. You will learn how to structure a mobile page, link multiple pages within a single document, and display pages as modal dialogs. --- ## Introduction to jQuery Mobile Pages While jQuery Mobile is compatible with all mobile platforms, it may not render perfectly on older desktop browsers due to its reliance on modern CSS3 features. For the best development and testing experience, we recommend using a modern browser like Google Chrome. ### Basic Page Structure A standard jQuery Mobile page is built using standard HTML5 elements combined with specialized `data-*` attributes. Below is a basic template: ```html ``` ### Code Explanation: * **`data-role="page"`**: Defines the container that acts as a single page displayed in the browser viewport. * **`data-role="header"`**: Creates a toolbar at the top of the page, typically used for the page title, navigation, or action buttons. * **`data-role="main" class="ui-content"`**: Defines the main content area of the page where you place text, images, forms, buttons, and other elements. The `ui-content` class is essential as it adds standard padding and margins to make the content readable. * **`data-role="footer"`**: Creates a toolbar at the bottom of the page, often used for copyright notices, navigation tabs, or secondary actions. > **Note:** jQuery Mobile relies heavily on HTML5 `data-*` attributes to dynamically style and structure UI components. Browsers that do not support these attributes will gracefully degrade and render them as standard HTML elements. --- ## Multi-Page Architecture in a Single File One of the most powerful features of jQuery Mobile is its ability to support multiple "pages" within a single HTML document. This reduces HTTP requests and enables seamless transitions. To link internal pages, assign a unique `id` attribute to each `data-role="page"` container, and reference that ID in your anchor (`href`) tags. ### Multi-Page Example ```html ``` ### Performance Consideration While single-file multi-page structures are highly efficient for small to medium applications, loading too many pages, heavy images, or complex scripts in a single HTML file can significantly increase initial load times. For larger applications, you should link to external HTML files instead: ```html Visit External Page ``` --- ## Displaying Pages as Dialogs A dialog is a transient window used to display information, alerts, or forms. In jQuery Mobile, any page can be styled and presented as a modal dialog. To open a page as a dialog, you can add the `data-dialog="true"` attribute directly to the target page container. ### Dialog Example ```html ``` ### Key Features of Dialogs: * **Visual Styling**: The target page automatically receives rounded corners, a dark overlay background, and a close button (an "X" icon) in the header. * **Dismissibility**: Clicking outside the dialog or pressing the escape key will automatically close it and return the user to the previous page.