jQuery Mobile Page

Getting Started with jQuery Mobile

| | Although jQuery Mobile is compatible with all mobile devices, it does not fully support PCs (due to limited CSS3 support). <br> <br>For a better reading experience of this tutorial, it is recommended to use Google Chrome browser. | | --- | --- |

Example data-role="page" > data-role="header" > data-role="main" class="ui-content" > data-role="footer"

Example Analysis:

• data-role="page" is the page displayed in the browser.

• data-role="header" creates a toolbar at the top of the page (usually for titles or search buttons).

• data-role="main" defines the content of the page, such as text, images, forms, buttons, etc.

• The "ui-content" class is used to add padding and margins to the page.

• data-role="footer" is used to create a toolbar at the bottom of the page.

• You can add any HTML elements - paragraphs, images, headings, lists, etc. - within these containers.

| | jQuery Mobile relies on HTML5 data-* attributes to support various UI elements, transitions, and page structures. Browsers that do not support them will silently ignore them. | | --- | --- |

Adding jQuery Mobile to Your Pages

With jQuery Mobile, you can create multiple different pages within a single HTML file.

You can distinguish pages using the same unique ID with different href attributes:

Example

<div data-role="page" id="pageone">
   <div data-role="main" class="ui-content">
      <a href="#pagetwo">Go to the second page</a>
   </div>
</div>
<div data-role="page" id="pagetwo">
   <div data-role="main" class="ui-content">
      <a href="#pageone">Go to the first page</a>
   </div>
</div>

Note: When a web application has a large amount of content (text, images, scripts, etc.), it can significantly affect loading times. If you do not want to use internal page links, you can use external files:

<a href="externalfile.html">Visit external file</a>

Using Pages as Dialogs

Dialogs are used to display page information or for form input.

Add data-rel="dialog" to a link to make the link open as a dialog when clicked:

Example

<div data-role="page" id="pageone">
   <div data-role="main" class="ui-content">
      <a href="#pagetwo">Go to the second page</a>
   </div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
   <div data-role="main" class="ui-content">
      <a href="#pageone">Go to the first page</a>
   </div>
</div>