Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Navigation: Add navigation hash processing demo

Pass hash query params into location via page's data-url
Illustrate history retention via allowSamePageTransition
  • Loading branch information...
commit f42f54a708fb06a9c74382318bf3b4fb22b77edd 1 parent 9904b3f
@gabrielschulhof gabrielschulhof authored
Showing with 130 additions and 0 deletions.
  1. +1 −0  demos/jqm-contents.php
  2. +129 −0 demos/navigation-hash-processing/index.php
View
1  demos/jqm-contents.php
@@ -82,6 +82,7 @@
<li data-filtertext="ajax navigation navigate widget history event method"><a href="../navigation/" data-ajax="false">Navigation</a></li>
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
+ <li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
</ul>
</li>
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
View
129 demos/navigation-hash-processing/index.php
@@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Hash Processing - Navigation - jQuery Mobile Demos</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css" />
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <script id="demo-script">
+( function( $, undefined ) {
+
+// Helper function that splits a URL just the way we want it
+var processHash = function( url ) {
+ var parsed = $.mobile.path.parseUrl( url ),
+ hashQuery = parsed.hash.split( "?" );
+
+ return {
+ parsed: parsed,
+ cleanHash: ( hashQuery.length > 0 ? hashQuery[ 0 ] : "" ),
+ queryParameters: ( hashQuery.length > 1 ? hashQuery[ 1 ] : "" )
+ };
+};
+
+$.mobile.document
+ .on( "pagebeforechange", function( event, data ) {
+
+ // When we go from #secondary-page to #secondary-page we wish to indicate
+ // that a transition to the same page is allowed.
+ if ( $.type( data.toPage ) === "string" &&
+ data.options.fromPage &&
+ data.options.fromPage.attr( "id" ) === "secondary-page" &&
+ processHash( data.toPage ).cleanHash === "#secondary-page" ) {
+
+ data.options.allowSamePageTransition = true;
+ }
+ })
+ .on( "pagecontainerbeforetransition", function( event, data ) {
+ var queryParameters = {},
+ processedHash = processHash( data.absUrl );
+
+ // We only modify default behaviour when navigating to the secondary page
+ if ( processedHash.cleanHash === "#secondary-page" ) {
+
+ // Assemble query parameters object from the query string
+ if ( processedHash.queryParameters ) {
+ $.each( processedHash.queryParameters.split( "&" ),
+ function( index, value ) {
+ var pair = value.split( "=" );
+
+ if ( pair.length > 0 && pair[ 0 ] ) {
+ queryParameters[ pair[ 0 ] ] =
+ ( pair.length > 1 ? pair[ 1 ] : true );
+ }
+ });
+ }
+
+ // Set the title from the query parameters
+ $( "#section" ).text( queryParameters.section );
+
+ // Set the url of the page - this will be used by navigation to set the
+ // URL in the location bar
+ $( "#secondary-page" ).jqmData( "url", processedHash.parsed.hash );
+ }
+ });
+})( jQuery );
+ </script>
+</head>
+<body>
+ <div id="main-page" data-role="page" class="jqm-demos" data-quicklinks="true">
+
+ <div data-role="header" class="jqm-header">
+ <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
+ <p><span class="jqm-version"></span> Demos</p>
+ <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>
+ <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>
+ </div><!-- /header -->
+
+ <div role="main" class="ui-content jqm-content">
+ <h1>Hash Processing</h1>
+ <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>
+ <div data-demo-html="#demo-page,#secondary-page" data-demo-js="#demo-script">
+ <a href="#demo-page" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Demo</a>
+ </div>
+ </div><!-- /content -->
+
+ <?php include( '../jqm-navmenu.php' ); ?>
+
+ <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
+ <p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
+ <p>Copyright 2014 The jQuery Foundation</p>
+ </div><!-- /footer -->
+
+ <?php include( '../jqm-search.php' ); ?>
+
+ </div><!-- /page -->
+
+ <div id="demo-page" data-role="page">
+ <div data-role="header">
+ <a href="#main-page" class="ui-btn ui-icon-back ui-btn-icon-left">Back To Demos</a>
+ <h1>Demo Main Page</h1>
+ </div>
+ <div role="main" class="ui-content">
+ <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>
+ <a href="#secondary-page?section=My Area" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Area</a>
+ <a href="#secondary-page?section=My Friends" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Friends</a>
+ <a href="#secondary-page?section=My Items" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Items</a>
+ </div>
+ </div>
+
+ <div id="secondary-page" data-role="page">
+ <div data-role="header">
+ <a href="#demo-page" class="ui-btn ui-icon-back ui-btn-icon-left">Back To Main Page</a>
+ <a href="#main-page" class="ui-btn ui-icon-arrow-u ui-btn-icon-left">Back To Demos</a>
+ <h1 id="section"></h1>
+ </div>
+ <div role="main" class="ui-content">
+ <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>
+ <p>You can also navigate to this same page with different parameters using the links below:</p>
+ <a href="#secondary-page?section=My Area" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Area</a>
+ <a href="#secondary-page?section=My Friends" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Friends</a>
+ <a href="#secondary-page?section=My Items" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">My Items</a>
+ </div>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.