Skip to content

Commit f42f54a

Browse files
author
Gabriel Schulhof
committed
Navigation: Add navigation hash processing demo
Pass hash query params into location via page's data-url Illustrate history retention via allowSamePageTransition
1 parent 9904b3f commit f42f54a

File tree

2 files changed

+130
-0
lines changed

2 files changed

+130
-0
lines changed

‎demos/jqm-contents.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
8383
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
8484
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
85+
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
8586
</ul>
8687
</li>
8788
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">

‎demos/navigation-hash-processing/index.php

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Hash Processing - Navigation - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css" />
9+
<link rel="shortcut icon" href="../favicon.ico">
10+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
11+
<script src="../../external/jquery/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<script id="demo-script">
15+
( function( $, undefined ) {
16+
17+
// Helper function that splits a URL just the way we want it
18+
var processHash = function( url ) {
19+
var parsed = $.mobile.path.parseUrl( url ),
20+
hashQuery = parsed.hash.split( "?" );
21+
22+
return {
23+
parsed: parsed,
24+
cleanHash: ( hashQuery.length > 0 ? hashQuery[ 0 ] : "" ),
25+
queryParameters: ( hashQuery.length > 1 ? hashQuery[ 1 ] : "" )
26+
};
27+
};
28+
29+
$.mobile.document
30+
.on( "pagebeforechange", function( event, data ) {
31+
32+
// When we go from #secondary-page to #secondary-page we wish to indicate
33+
// that a transition to the same page is allowed.
34+
if ( $.type( data.toPage ) === "string" &&
35+
data.options.fromPage &&
36+
data.options.fromPage.attr( "id" ) === "secondary-page" &&
37+
processHash( data.toPage ).cleanHash === "#secondary-page" ) {
38+
39+
data.options.allowSamePageTransition = true;
40+
}
41+
})
42+
.on( "pagecontainerbeforetransition", function( event, data ) {
43+
var queryParameters = {},
44+
processedHash = processHash( data.absUrl );
45+
46+
// We only modify default behaviour when navigating to the secondary page
47+
if ( processedHash.cleanHash === "#secondary-page" ) {
48+
49+
// Assemble query parameters object from the query string
50+
if ( processedHash.queryParameters ) {
51+
$.each( processedHash.queryParameters.split( "&" ),
52+
function( index, value ) {
53+
var pair = value.split( "=" );
54+
55+
if ( pair.length > 0 && pair[ 0 ] ) {
56+
queryParameters[ pair[ 0 ] ] =
57+
( pair.length > 1 ? pair[ 1 ] : true );
58+
}
59+
});
60+
}
61+
62+
// Set the title from the query parameters
63+
$( "#section" ).text( queryParameters.section );
64+
65+
// Set the url of the page - this will be used by navigation to set the
66+
// URL in the location bar
67+
$( "#secondary-page" ).jqmData( "url", processedHash.parsed.hash );
68+
}
69+
});
70+
})( jQuery );
71+
</script>
72+
</head>
73+
<body>
74+
<div id="main-page" data-role="page" class="jqm-demos" data-quicklinks="true">
75+
76+
<div data-role="header" class="jqm-header">
77+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
78+
<p><span class="jqm-version"></span> Demos</p>
79+
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
80+
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
81+
</div><!-- /header -->
82+
83+
<div role="main" class="ui-content jqm-content">
84+
<h1>Hash Processing</h1>
85+
<p>If you wish to perform processing on the hash values as a user clicks the links to the various internal pages in your application, you can do so by handling the events <code>pagebeforechange</code> and <code>pagecontainerbeforetransition</code>.</p>
86+
<div data-demo-html="#demo-page,#secondary-page" data-demo-js="#demo-script">
87+
<a href="#demo-page" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Demo</a>
88+
</div>
89+
</div><!-- /content -->
90+
91+
<?php include( '../jqm-navmenu.php' ); ?>
92+
93+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
94+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
95+
<p>Copyright 2014 The jQuery Foundation</p>
96+
</div><!-- /footer -->
97+
98+
<?php include( '../jqm-search.php' ); ?>
99+
100+
</div><!-- /page -->
101+
102+
<div id="demo-page" data-role="page">
103+
<div data-role="header">
104+
<a href="#main-page" class="ui-btn ui-icon-back ui-btn-icon-left">Back To Demos</a>
105+
<h1>Demo Main Page</h1>
106+
</div>
107+
<div role="main" class="ui-content">
108+
<p>The following three buttons all take you to the same page. However, when you get there, you will notice that the title of the page is different depending on which button you have clicked.</p>
109+
<a href="#secondary-page?section=My Area" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Area</a>
110+
<a href="#secondary-page?section=My Friends" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Friends</a>
111+
<a href="#secondary-page?section=My Items" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Items</a>
112+
</div>
113+
</div>
114+
115+
<div id="secondary-page" data-role="page">
116+
<div data-role="header">
117+
<a href="#demo-page" class="ui-btn ui-icon-back ui-btn-icon-left">Back To Main Page</a>
118+
<a href="#main-page" class="ui-btn ui-icon-arrow-u ui-btn-icon-left">Back To Demos</a>
119+
<h1 id="section"></h1>
120+
</div>
121+
<div role="main" class="ui-content">
122+
<p>This is the second page in the demo. Notice that, as you navigate to this page from the main page, the title of this page changes depending on which button on the main page you clicked.</p>
123+
<p>You can also navigate to this same page with different parameters using the links below:</p>
124+
<a href="#secondary-page?section=My Area" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Area</a>
125+
<a href="#secondary-page?section=My Friends" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Friends</a>
126+
<a href="#secondary-page?section=My Items" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Items</a>
127+
</div>
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)