WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Pages


Create a Page

Below, we have created a simple, standard jQuery Mobile page:

Example

<body>
<div data-role="page">

  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>I Am Now A Mobile Developer!!</p>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>

</div>
</body>
Try it yourself »

Example explained:

  • The data-role="page" is the page displayed in the browser
  • The data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)
  • The data-role="main" defines the content of the page, like text, images, buttons, forms, etc.
  • The "ui-content" class adds extra padding and margin inside the page content
  • The data-role="footer" creates a toolbar at the bottom of the page
  • Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.

Adding Pages in jQuery Mobile

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

Separate each page with a unique id and use the href attribute to link between them:

Example

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

<div data-role="page" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>
Try it yourself »

Tip: The load time will be affected by web applications with a lot of content (i.e text, links, images, scripts etc). Use external files if you don't want to link pages internally:

<a href="externalfile.html">Go To External Page</a>

Using Pages as Dialogs

A dialog box is a type of window used to show special information or request input.

To create a dialog box that opens when a user taps on a link, add data-dialog="true" to the page you want displayed as a dialog:

Example

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

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>
Try it yourself »