Home/ Questions/Q 4550118
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T16:27:13+00:00

I’m starting to dive into jQuery Mobile and I’m trying to figure out how

  • 0

I’m starting to dive into jQuery Mobile and I’m trying to figure out how each page is supposed to be constructed…

Say I have an app:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>jQuery Mobile: Demos and Documentation</title>
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
    <script type="text/javascript" src="docs/_assets/js/jqm-docs.js"></script>
</head> 
<body> 
<div data-role="page" data-theme="b" id="jqm-home">
    <div id="jqm-homeheader">
        <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
        <p>A Touch-Optimized Web Framework for Smartphones &amp; Tablets</p>
        <p id="jqm-version">Alpha Release</p>
    </div>

    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li data-role="list-divider">Overview</li>
            <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
            <li><a href="docs/about/features.html">Features</a></li>
            <li><a href="docs/about/accessibility.html">Accessibility</a></li>
            <li><a href="docs/about/platforms.html">Supported platforms</a></li>
        </ul>

    </div>
</div>
</body>
</html>

Now, when I navigate to “docs/about/intro.html”, does intro.html need to have all of the same document declarations as the main mobile app? In other words, <head>, <script>, <link>, etc… Do I need to declare every required script, style, and document type params as if it was an individual page being loaded on its on?

The reason I ask is from what I can see, the page doesn’t actually get loaded… it’s like it’s loaded on top… you’re not actually going to “docs/about/intro.html” … I could be wrong.

Could someone kindly clarify this all for me?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s what happens (as per my understanding).

    Taking your example, jQuery Mobile looks for “docs/about/intro.html”, goes into it, and looks for the <div data-role="page">, ignoring everything else <head>, <body> etc.

    It then brings that page div into your existing page and changes the URL to “#/docs/about/intro.html” (or something similar)

    • 0