WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Pages

Create a Page

Below, we have made a basic, 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 information role="page" is the page shown in the browser
  • The information role="header" makes a toolbar at the highest point of the page (frequently utilized for title or inquiry buttons)
  • The information role="main" characterizes the substance of the page, like content, pictures, catches, frames, etc.
  • The "ui-content" class includes additional cushioning and edge inside the page content
  • The information role="footer" makes a toolbar at the base of the page
  • Inside these compartments, you can include any HTML components - passages, pictures, headings, records, etc.

Adding Pages in jQuery Mobile

In jQuery Mobile, you can make numerous pages in a solitary HTML file.

Separate each page with an interesting id and utilize the href ascribe to connect between them:

Example

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

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

Tip: The heap time will be influenced by web applications with a great deal of substance (i.e content, joins, pictures, contents and so forth). Utilize outer records on the off chance that you would prefer not to interface pages internally:

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

Using Pages as Dialogs

A discourse box is a sort of window used to indicate extraordinary data or solicitation input.

To make an exchange box that opens when a client taps on a connection, include information dialog="true" to the page you need showed as a dialog:

Example

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

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