jQuery Mobile Page

Get started with jQuery Mobile

Tip:Although jQuery Mobile is suitable for all mobile devices, it may still have compatibility issues on desktop computers (due to limited CSS3 support).

Therefore, in this tutorial, we recommend that you use Google's Chrome browser for the best reading experience.

example

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Welcome to my homepage</h1>
  </div>
  <div data-role="content">
    <p>I am a mobile developer!</p>
  </div>
  <div data-role="footer">
    <h1>Footer text</h1>
  </div>
</div>
</body>

Try It Yourself

Example explanation:

  • data-role="page" is the page displayed in the browser
  • data-role="header" creates a toolbar at the top of the page (commonly used for titles and search buttons)
  • data-role="content" defines the content of the page, such as text, images, forms, and buttons, etc.
  • data-role="footer" creates a toolbar at the bottom of the page

In these containers, you can add any HTML element - paragraphs, images, headings, lists, etc.

Tip:HTML5 data-* attributes are used to create a "touch-friendly" interactive appearance for mobile devices through jQuery Mobile.

Add a page in jQuery Mobile

In jQuery Mobile, you can create multiple pages in a single HTML file.

Please separate each page with a unique id and use the href attribute to connect them:

example

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Go to page two</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>

Try It Yourself

Note:Web applications with a large amount of content can affect loading time (such as text, links, images, and scripts, etc.). If you do not want to use an internal link page, please use an external file:

<a href="externalfile.html">Go to external page</a>

Use a page as a dialog

A dialog is a window type used to display information or request input.

To create a dialog when the user clicks (taps) on a link, add data-rel="dialog" to the link:

example

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Go to Page Two</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>

Try It Yourself