Skip to content

Commit 6e0912f

Browse files
author
scottjehl
committed
progress towards making this demo work with urls that represent server resources
1 parent 95f1d5c commit 6e0912f

File tree

4 files changed

+94
-16
lines changed

4 files changed

+94
-16
lines changed

‎docs/pages/dynamic-samples/animals.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Animals</title>
7+
<link rel="stylesheet" href="../../../themes/default/">
8+
<script src="../../../js/jquery.js"></script>
9+
<script src="../../../js/"></script>
10+
</head>
11+
12+
<body>
13+
<div data-role="page">
14+
<div data-role="header"><h1>Animals</h1></div>
15+
<div data-role="content">
16+
<p>All your favorites from aardvarks to zebras.</p>
17+
<ul data-role="listview" data-inset="true">
18+
<li>Pets</li>
19+
<li>Farm Animals</li>
20+
<li>Wild Animals</li>
21+
</ul>
22+
</div>
23+
</div>
24+
</body>
25+
</html>

‎docs/pages/dynamic-samples/colors.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Colors</title>
7+
<link rel="stylesheet" href="../../../themes/default/">
8+
<script src="../../../js/jquery.js"></script>
9+
<script src="../../../js/"></script>
10+
</head>
11+
12+
<body>
13+
<div data-role="page">
14+
<div data-role="header"><h1>Colors</h1></div>
15+
<div data-role="content">
16+
<p>Fresh colors from the magic rainbow.</p>
17+
<ul data-role="listview" data-inset="true">
18+
<li>Blue</li>
19+
<li>Green</li>
20+
<li>Orange</li>
21+
<li>Purple</li>
22+
<li>Red</li>
23+
<li>Yellow</li>
24+
<li>Violet</li>
25+
</ul>
26+
</div>
27+
</div>
28+
</body>
29+
</html>

‎docs/pages/dynamic-samples/sample-reuse-page.html‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,9 @@
7676
// the URL passed in. Generate markup for the items in the
7777
// category, inject it into an embedded page, and then make
7878
// that page the current active page.
79-
function showCategory( urlObj, options )
79+
function showCategory( url, options )
8080
{
81-
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
81+
var categoryName = url.split( "." )[ 0 ],
8282

8383
// Get the object that represents the category we
8484
// are interested in. Note, that at this point we could
@@ -88,8 +88,8 @@
8888

8989
// The pages we use to display our content are already in
9090
// the DOM. The id of the page we are going to write our
91-
// content into is specified in the hash before the '?'.
92-
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
91+
// content into is category-items
92+
pageSelector = "#category-items";
9393

9494
if ( category ) {
9595
// Get the page we are going to dump our content into.
@@ -139,7 +139,7 @@
139139
// to be the url that shows up in the browser's location field,
140140
// so set the dataUrl option to the URL for the category
141141
// we just loaded.
142-
options.dataUrl = urlObj.href;
142+
options.dataUrl = url;
143143

144144
// Now call changePage() and tell it to switch to
145145
// the page we just modified.
@@ -156,16 +156,15 @@
156156
// We are being asked to load a page by URL, but we only
157157
// want to handle URLs that request the data for a specific
158158
// category.
159-
var u = $.mobile.path.parseUrl( data.toPage ),
160-
re = /^#category-item/;
161-
if ( u.hash.search(re) !== -1 ) {
159+
var u = data.toPage;
160+
161+
if ( u.match( /\/([^\/\.]+\.html)/ ) ) {
162+
162163
// We're being asked to display the items for a specific category.
163164
// Call our internal method that builds the content for the category
164165
// on the fly based on our in-memory category data structure.
165-
showCategory( u, data.options );
166-
167-
// Make sure to tell changepage we've handled this call so it doesn't
168-
// have to do anything.
166+
showCategory( RegExp.$1, data.options );
167+
169168
e.preventDefault();
170169
}
171170
}
@@ -175,14 +174,14 @@
175174
</head>
176175

177176
<body>
178-
<div id="home" data-role="page">
177+
<div data-role="page">
179178
<div data-role="header"><h1>Categories</h1></div>
180179
<div data-role="content">
181180
<h2>Select a Category Below:</h2>
182181
<ul data-role="listview" data-inset="true">
183-
<li><a href="#category-items?category=animals">Animals</a></li>
184-
<li><a href="#category-items?category=colors">Colors</a></li>
185-
<li><a href="#category-items?category=vehicles">Vehicles</a></li>
182+
<li><a href="animals.html">Animals</a></li>
183+
<li><a href="colors.html">Colors</a></li>
184+
<li><a href="vehicles.html">Vehicles</a></li>
186185
</ul>
187186
</div>
188187
</div>

‎docs/pages/dynamic-samples/vehicles.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Vehicles</title>
7+
<link rel="stylesheet" href="../../../themes/default/">
8+
<script src="../../../js/jquery.js"></script>
9+
<script src="../../../js/"></script>
10+
</head>
11+
12+
<body>
13+
<div data-role="page">
14+
<div data-role="header"><h1>Vehicles</h1></div>
15+
<div data-role="content">
16+
<p>Everything from cars to planes.</p>
17+
<ul data-role="listview" data-inset="true">
18+
<li>Cars</li>
19+
<li>Planes</li>
20+
<li>Destruction</li>
21+
</ul>
22+
</div>
23+
</div>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)