Skip to content

Commit 2f63fdf

Browse files
author
scottjehl
committed
Merge remote branch 'origin/master'
2 parents bf02fc8 + fcbd4c3 commit 2f63fdf

File tree

2 files changed

+224
-0
lines changed

2 files changed

+224
-0
lines changed

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

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

‎js/jquery.mobile.navigation.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,26 @@
216216
return ( /^(:?\w+:)/ ).test( url );
217217
},
218218

219+
//check if the specified url refers to the first page in the main application document.
220+
isFirstPageUrl: function( url ) {
221+
// We only deal with absolute paths.
222+
var u = path.parseUrl( path.makeUrlAbsolute( url, documentBase ) ),
223+
224+
// Does the url have the same path as the document?
225+
samePath = u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ),
226+
227+
// Get the first page element.
228+
fp = $.mobile.firstPage,
229+
230+
// Get the id of the first page element if it has one.
231+
fpId = fp && fp[0] ? fp[0].id : undefined;
232+
233+
// The url refers to the first page if the path matches the document and
234+
// it either has no hash value, or the hash is exactly equal to the id of the
235+
// first page element.
236+
return samePath && ( !u.hash || u.hash === "#" || ( fpId && u.hash.replace( /^#/, "" ) === fpId ) );
237+
},
238+
219239
isEmbeddedPage: function( url ) {
220240
var u = path.parseUrl( url );
221241

@@ -605,6 +625,12 @@
605625
// Check to see if the page already exists in the DOM.
606626
page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
607627

628+
// If we failed to find a page in the DOM, check the URL to see if it
629+
// refers to the first page in the application.
630+
if ( page.length === 0 && $.mobile.firstPage && path.isFirstPageUrl( absUrl ) ) {
631+
page = $( $.mobile.firstPage );
632+
}
633+
608634
// Reset base to the default document base.
609635
if ( base ) {
610636
base.reset();

0 commit comments

Comments
 (0)