Skip to content

Commit b3ce277

Browse files
jblasjblas
committed
Moved scottjehl's modified sample to a new file (sample-reuse-page-external.html) and restored the original code in sample-reuse-page.html.
1 parent 6e0912f commit b3ce277

File tree

2 files changed

+211
-15
lines changed

2 files changed

+211
-15
lines changed

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

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>changePage JSON Sample</title>
7+
<link rel="stylesheet" href="../../../themes/default/">
8+
<script src="../../../js/jquery.js"></script>
9+
<script src="../../../js/"></script>
10+
<script>
11+
12+
// Some sample categorized data. This data is in-memory
13+
// for demonstration purposes, but could be loaded dynamically
14+
// via ajax.
15+
var categoryData = {
16+
animals: {
17+
name: "Animals",
18+
description: "All your favorites from aardvarks to zebras.",
19+
items: [
20+
{
21+
name: "Pets",
22+
},
23+
{
24+
name: "Farm Animals",
25+
},
26+
{
27+
name: "Wild Animals",
28+
}
29+
]
30+
},
31+
colors: {
32+
name: "Colors",
33+
description: "Fresh colors from the magic rainbow.",
34+
items: [
35+
{
36+
name: "Blue",
37+
},
38+
{
39+
name: "Green",
40+
},
41+
{
42+
name: "Orange",
43+
},
44+
{
45+
name: "Purple",
46+
},
47+
{
48+
name: "Red",
49+
},
50+
{
51+
name: "Yellow",
52+
},
53+
{
54+
name: "Violet",
55+
}
56+
]
57+
},
58+
vehicles: {
59+
name: "Vehicles",
60+
description: "Everything from cars to planes.",
61+
items: [
62+
{
63+
name: "Cars",
64+
},
65+
{
66+
name: "Planes",
67+
},
68+
{
69+
name: "Construction",
70+
}
71+
]
72+
}
73+
};
74+
75+
// Load the data for a specific category, based on
76+
// the URL passed in. Generate markup for the items in the
77+
// category, inject it into an embedded page, and then make
78+
// that page the current active page.
79+
function showCategory( url, options )
80+
{
81+
var categoryName = url.replace(/^.*\/|\.html$/g, ""),
82+
83+
// Get the object that represents the category we
84+
// are interested in. Note, that at this point we could
85+
// instead fire off an ajax request to fetch the data, but
86+
// for the purposes of this sample, it's already in memory.
87+
category = categoryData[ categoryName ],
88+
89+
// The pages we use to display our content are already in
90+
// the DOM. The id of the page we are going to write our
91+
// content into is category-items
92+
pageSelector = "#category-items";
93+
94+
if ( category ) {
95+
// Get the page we are going to dump our content into.
96+
var $page = $( pageSelector ),
97+
98+
// Get the header for the page.
99+
$header = $page.children( ":jqmData(role=header)" ),
100+
101+
// Get the content area element for the page.
102+
$content = $page.children( ":jqmData(role=content)" ),
103+
104+
// The markup we are going to inject into the content
105+
// area of the page.
106+
markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
107+
108+
// The array of items for this category.
109+
cItems = category.items,
110+
111+
// The number of items in the category.
112+
numItems = cItems.length;
113+
114+
// Generate a list item for each item in the category
115+
// and add it to our markup.
116+
for ( var i = 0; i < numItems; i++ ) {
117+
markup += "<li>" + cItems[i].name + "</li>";
118+
}
119+
markup += "</ul>";
120+
121+
// Find the h1 element in our header and inject the name of
122+
// the category into it.
123+
$header.find( "h1" ).html( category.name );
124+
125+
// Inject the category items markup into the content element.
126+
$content.html( markup );
127+
128+
// Pages are lazily enhanced. We call page() on the page
129+
// element to make sure it is always enhanced before we
130+
// attempt to enhance the listview markup we just injected.
131+
// Subsequent calls to page() are ignored since a page/widget
132+
// can only be enhanced once.
133+
$page.page();
134+
135+
// Enhance the listview we just injected.
136+
$content.find( ":jqmData(role=listview)" ).listview();
137+
138+
// We don't want the data-url of the page we just modified
139+
// to be the url that shows up in the browser's location field,
140+
// so set the dataUrl option to the URL for the category
141+
// we just loaded.
142+
options.dataUrl = url;
143+
144+
// Now call changePage() and tell it to switch to
145+
// the page we just modified.
146+
$.mobile.changePage( $page, options );
147+
}
148+
}
149+
150+
151+
// Listen for any attempts to call changepage.
152+
$(document).bind( "pagebeforechange", function( e, data ) {
153+
// We only want to handle changepage calls where the caller is
154+
// asking us to load a page by URL.
155+
var u = data.toPage;
156+
if ( typeof u === "string" ) {
157+
// We are being asked to load a page by URL, but we only
158+
// want to handle URLs that request the data for a specific
159+
// category.
160+
161+
if ( $.mobile.path.isExternal( u ) && u.match( /\/([^\/\.]+\.html)/ ) ) {
162+
163+
// We're being asked to display the items for a specific category.
164+
// Call our internal method that builds the content for the category
165+
// on the fly based on our in-memory category data structure.
166+
showCategory( u, data.options );
167+
168+
e.preventDefault();
169+
}
170+
}
171+
});
172+
173+
</script>
174+
</head>
175+
176+
<body>
177+
<div data-role="page">
178+
<div data-role="header"><h1>Categories</h1></div>
179+
<div data-role="content">
180+
<h2>Select a Category Below:</h2>
181+
<ul data-role="listview" data-inset="true">
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>
185+
</ul>
186+
</div>
187+
</div>
188+
<div id="category-items" data-role="page">
189+
<div data-role="header"><h1></h1></div>
190+
<div data-role="content"></div>
191+
</div>
192+
</body>
193+
</html>

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

Lines changed: 18 additions & 15 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( url, options )
79+
function showCategory( urlObj, options )
8080
{
81-
var categoryName = url.split( "." )[ 0 ],
81+
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
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 category-items
92-
pageSelector = "#category-items";
91+
// content into is specified in the hash before the '?'.
92+
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
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 = url;
142+
options.dataUrl = urlObj.href;
143143

144144
// Now call changePage() and tell it to switch to
145145
// the page we just modified.
@@ -156,34 +156,37 @@
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 = data.toPage;
160-
161-
if ( u.match( /\/([^\/\.]+\.html)/ ) ) {
162-
159+
var u = $.mobile.path.parseUrl( data.toPage ),
160+
re = /^#category-item/;
161+
if ( u.hash.search(re) !== -1 ) {
163162
// We're being asked to display the items for a specific category.
164163
// Call our internal method that builds the content for the category
165164
// on the fly based on our in-memory category data structure.
166-
showCategory( RegExp.$1, data.options );
167-
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.
168169
e.preventDefault();
169170
}
170171
}
171172
});
172173

174+
173175
</script>
174176
</head>
175177

176178
<body>
177-
<div data-role="page">
179+
<div id="home" data-role="page">
178180
<div data-role="header"><h1>Categories</h1></div>
179181
<div data-role="content">
180182
<h2>Select a Category Below:</h2>
181183
<ul data-role="listview" data-inset="true">
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>
184+
<li><a href="#category-items?category=animals">Animals</a></li>
185+
<li><a href="#category-items?category=colors">Colors</a></li>
186+
<li><a href="#category-items?category=vehicles">Vehicles</a></li>
185187
</ul>
186188
</div>
189+
187190
</div>
188191
<div id="category-items" data-role="page">
189192
<div data-role="header"><h1></h1></div>

0 commit comments

Comments
 (0)