Menu
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 & 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?
640
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)
85
The way jquery mobile works, you must have any scripts and css in the head of the first page loaded. This can be demonstrated by going to the scrollview demos. If you can navigate to any page from there, you bring the scripts to enable scrollview with it, but if you refresh the page, you lose the functionality of the scripts
I would recommend putting the contents of head on all of your pages for the following reason - what happens if someone opens the 'about' page before they open home? You will get a fairly indecipherable web page.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
