Permalink
Browse files

Pagecontainer: make all page events go through triggerWithDeprecated

To make sure all former page events have a page container counterpart,
and that this counterpart has both a toPage and prevPage prop on the ui
object
Also add a demo of how to debug pagecontainer events

Fixes gh-7063
Fixes gh-7283
Fixes gh-7176
Closes gh-7285

(cherry picked from commit 3d4d7dd)
  • Loading branch information...
arschmitz committed Mar 13, 2014
1 parent 10748b2 commit 40b626ed4dd9d20a5ed9b5411d4e3c3cc4123627
View
@@ -136,6 +136,7 @@
<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>
+ <li data-filtertext="navigation redirection hash query"><a href="../page-events/" data-ajax="false">Page Navigation Events</a></li>
</ul>
</div>
</li>
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Page Events - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
+ <script>
+ $.mobile.eventLogger({
+ deprecated: true,
+ showAlert: true,
+ events: {
+ page: true
+ },
+ widgets: {
+ page: true,
+ pagecontainer: true
+ }
+ });
+ </script>
+</head>
+<body>
+<div 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>Navigate between pages and open and close panel and popup widgets to see which events fire and the data these hold</h1>
+ <a class="ui-btn ui-corner-all ui" href="alertevents.php">Go To Page 1</a>
+ <a class="ui-btn ui-corner-all ui" href="alertevents-3.php">Go To Page 3</a>
+
+ </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 -->
+
+</body>
+</html>
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Page Events - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
+ <script>
+ $.mobile.eventLogger({
+ deprecated: true,
+ showAlert: true,
+ events: {
+ page: true
+ },
+ widgets: {
+ page: true,
+ pagecontainer: true
+ }
+ });
+ </script>
+</head>
+<body>
+<div 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>navigate between pages and open and close panel and popup widgets to see which events fire and their data</h1>
+ <a class="ui-btn ui-corner-all ui" href="alertevents.php">Go To Page 1</a>
+ <a class="ui-btn ui-corner-all ui" href="alertevents-2.php">Go To Page 2</a>
+ <a class="ui-btn ui-corner-all ui" href="#popup">Open Popup</a>
+
+ </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 -->
+
+</body>
+</html>
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Page Events - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
+ <script>
+ $.mobile.eventLogger({
+ deprecated: true,
+ showAlert: true,
+ events: {
+ page: true
+ },
+ widgets: {
+ page: true,
+ pagecontainer: true
+ }
+ });
+ </script>
+</head>
+<body>
+<div 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 id="popup" data-role="popup">
+ Popup
+ </div>
+ <div role="main" class="ui-content jqm-content">
+
+ <h1>navigate between pages and open and close panel and popup widgets to see which events fire and their data</h1>
+ <a class="ui-btn ui-corner-all ui" href="alertevents-2.php">Go To Page 2</a>
+ <a class="ui-btn ui-corner-all ui" href="alertevents-3.php">Go To Page 3</a>
+ <a class="ui-btn ui-corner-all ui" href="foo.html">Go To Page that does not exist</a>
+ <a class="ui-btn ui-corner-all ui" data-rel="popup" href="#popup">Open Popup</a>
+ <label for="select">Select Menu</label>
+ <select id="select" data-native-menu="false">
+ <option>foo</option>
+ <option>bar</option>
+ </select>
+
+ </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 -->
+
+</body>
+</html>
@@ -0,0 +1,8 @@
+<?php
+ $seconds_to_cache = 3600000;
+ $ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
+ header("Expires: $ts");
+ header("Pragma: cache");
+ header("Cache-Control: max-age=$seconds_to_cache");
+ echo file_get_contents( "http://api.jquerymobile.com/resources/api.xml" );
+?>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Page Events - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+<div 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>Page Events Demo</h1>
+
+ <p>This demo illustrates the different page events that fire during a page's life-cycle and the elements on which they are triggered.</p>
+
+ <h2>Event Debugging</h2>
+
+ <p>This demo uses the jquery-mobile-event-debugger plugin from arschmitz available at <a href="https://github.com/arschmitz/jquery-mobile-event-debugger">https://github.com/arschmitz/jquery-mobile-event-debugger</a>.
+ This tool allows jQuery Mobile events to be logged or alerted as they happen for inspection and are agumented with descriptions from the API docs.</p>
+
+ <a class="ui-btn ui-corner-all" href="logevents.php" data-ajax="false">View Demo</a>
+ <a class="ui-btn ui-corner-all" href="alertevents.php" data-ajax="false">View Demo With Alerts</a>
+
+ </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 -->
+
+</body>
+</html>
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Page Events - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <script src="https://rawgit.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
+ <script>
+ $.mobile.eventLogger({
+ deprecated: true,
+ events: {
+ page: true
+ },
+ widgets: {
+ page: true,
+ pagecontainer: true
+ }
+ });
+ </script>
+</head>
+<body>
+<div 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>Navigate between pages and open and close panel and popup widgets to see which events fire and their data.</h1>
+ <a class="ui-btn ui-corner-all ui" href="logevents.php">Go To Page 1</a>
+ <a class="ui-btn ui-corner-all ui" href="logevents-3.php">Go To Page 3</a>
+ <a class="ui-btn ui-corner-all ui" href="#popup">Open Popup</a>
+
+ </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 -->
+
+</body>
+</html>
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Page Events - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
+ <script>
+ $.mobile.eventLogger({
+ deprecated: true,
+ events: {
+ page: true
+ },
+ widgets: {
+ page: true,
+ pagecontainer: true
+ }
+ });
+ </script>
+</head>
+<body>
+<div 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>Navigate between pages and open and close panel and popup widgets to see which events fire and their data.</h1>
+ <a class="ui-btn ui-corner-all ui" href="logevents.php">Go To Page 1</a>
+ <a class="ui-btn ui-corner-all ui" href="logevents-2.php">Go To Page 2</a>
+ <a class="ui-btn ui-corner-all ui" href="#popup">Open Popup</a>
+
+ </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 -->
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 40b626e

Please sign in to comment.