Init: add option to prevent hiding url bar

jquery-archive · Jul 24, 2013 · ee50437 · ee50437 · jaspermdegroot · Jul 24, 2013
1 parent 708dd4e
commit ee50437
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 7 deletions.
diff --git a/demos/faq/how-do-i-load-a-page.php b/demos/faq/how-do-i-load-a-page.php
@@ -10,6 +10,11 @@
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
 	<script src="../../js/jquery.js"></script>
 	<script src="../_assets/js/"></script>
+	<script>
+		$( document ).on( "mobileinit", function(){
+			$.mobile.hideUrlBar = false;
+		});
+	</script>
 	<script src="../../js/"></script>
 </head>
 <body>
@@ -25,15 +30,11 @@
 	<div data-role="content" class="jqm-content">
 			<h2>Question:</h2>
 
-			<h1>How do I load a page?</h1>
+			<h1>How do I prevent jQuery Mobile from hiding the url bar?</h1>
 
 			<h2>Answer:</h2>
 
-			<p class="jqm-intro">To load an external page, enhance its content, and insert it into the DOM, use the <code>loadPage</code> method. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:</p>
-<pre><code>
-//load the "about us" page into the DOM
-$.mobile.loadPage( "about/us.html" );
-</code></pre>
+			<p class="jqm-intro"><code>Set $.mobile.hideUrlBar = false; </code> on mobileinit</p>
 
 			<a href="index.php" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">All Questions &amp; Answers</a>
 

diff --git a/demos/faq/how-do-i-turn-off-url-hiding.php b/demos/faq/how-do-i-turn-off-url-hiding.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Q&A - jQuery Mobile Demos - How do I prevent jQuery Mobile from hiding the url bar?</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="../../js/jquery.js"></script>
+	<script src="../_assets/js/"></script>
+	<script>
+		$( document ).on( "mobileinit", function(){
+			$.mobile.hideUrlBar = false;
+		});
+	</script>
+	<script src="../../js/"></script>
+</head>
+<body>
+<div data-role="page" class="jqm-demos jqm-faq">
+
+	<div data-role="header" class="jqm-header">
+		<h1 class="jqm-logo"><a href="../"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
+		<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
+		<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
+		<?php include( '../search.php' ); ?>
+	</div><!-- /header -->
+
+	<div data-role="content" class="jqm-content">
+			<h2>Question:</h2>
+
+			<h1>How do I prevent jQuery Mobile from hiding the url bar?</h1>
+
+			<h2>Answer:</h2>
+
+			<p class="jqm-intro"><code>Set $.mobile.hideUrlBar = false; </code> on mobileinit</p>
+
+			<a href="index.php" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l" data-iconpos="left">All Questions &amp; Answers</a>
+
+	</div><!-- /content -->
+
+	<div data-role="footer" class="jqm-footer">
+		<p class="jqm-version"></p>
+		<p>Copyright 2013 The jQuery Foundation</p>
+	</div><!-- /footer -->
+
+<?php include( '../global-nav.php' ); ?>
+
+</div><!-- /page -->
+</body>
+</html>
diff --git a/demos/nav-faq.php b/demos/nav-faq.php
@@ -42,6 +42,8 @@
 
 <li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a href="faq/how-do-i-load-a-page.php">How do I load a page?</a></li>
 
+<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage hide url bar"><a href="faq/how-do-i-turn-off-url-hiding.php" data-ajax="false">How do I turn off the automatic hiding of the url bar?</a></li>
+
 <li data-role="list-divider">Events</li>
 
 <li data-section="Questions & Answers" data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a href="faq/how-do-i-use-touch-mouse-events.php">How do I use touch and mouse events?</a></li>

diff --git a/js/jquery.mobile.defaults.js b/js/jquery.mobile.defaults.js
@@ -21,6 +21,8 @@ define( [ "jquery", "./jquery.mobile.ns", "json!../package.json" ], function( jQ
 		// hash segment before &ui-page= is used to make Ajax request
 		subPageUrlKey: "ui-page",
 
+		hideUrlBar: true,
+
 		// Class assigned to page currently in view, and during transitions
 		activePageClass: "ui-page-active",
 

diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js
@@ -161,7 +161,9 @@ define([
 
 		// window load event
 		// hide iOS browser chrome on load
-		$window.load( $.mobile.silentScroll );
+		if( $.mobile.hideUrlBar ){
+			$window.load( $.mobile.silentScroll );
+		}
 
 		if ( !$.support.cssPointerEvents ) {
 			// IE and Opera don't support CSS pointer-events: none that we use to disable link-based buttons