Skip to content
\n \n\n\n
\n
\n

Home

\n
\n
\n

Welcome!

\n About\n
\n
\n

Footer

\n
\n
\n\n
\n

About

\n
\n

About this app.

\n Back\n
\n
\n
\n","url":"https://ez4code.com/snippets/jquery-mobile-page-structure","keywords":"page, structure, layout","author":{"@type":"Person","name":"EZ4Code Team"},"publisher":{"@type":"Organization","name":"EZ4Code","logo":{"@type":"ImageObject","url":"https://ez4code.com/logo.png"}},"datePublished":"2024-01-01","dateModified":"2026-08-01","image":"https://ez4code.com/og-image.png"}
jQuery Mobile

Page Structure

Multi-page template with header, content, and footer roles.

By EZ4Code Team
pagestructurelayout

Code

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header" data-position="fixed">
      <h1>Home</h1>
    </div>
    <div role="main" class="ui-content">
      <p>Welcome!</p>
      <a href="#about" class="ui-btn">About</a>
    </div>
    <div data-role="footer" data-position="fixed">
      <h4>Footer</h4>
    </div>
  </div>

  <div data-role="page" id="about">
    <div data-role="header"><h1>About</h1></div>
    <div role="main" class="ui-content">
      <p>About this app.</p>
      <a href="#home" data-direction="reverse" class="ui-btn">Back</a>
    </div>
  </div>
</body>
</html>

Explanation

Each div[data-role=page] becomes a single-page app screen that jQuery Mobile swaps via AJAX transitions. Header, content, and footer roles auto-style the regions, and data-position=fixed pins bars to the viewport. Multiple pages can live in one HTML document; in-page hash links trigger animated transitions.

More jQuery Mobile Snippets

Page Transitions

Apply slide, pop, flip, and fade transitions between pages.

Toolbars

Fixed header and footer bars with fullscreen tap-to-toggle mode.

Navbars

Persistent icon-based navigation bars in the footer.

Listviews

Filterable, grouped lists with thumbnails, icons, and count bubbles.

Forms

Enhanced inputs including sliders, switches, and grouped controls.

Buttons

Themed, iconified, and grouped buttons from links and inputs.