Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 5319adc

Browse files
arschmitzarschmitz
committed
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
1 parent 373ddae commit 5319adc

File tree

13 files changed

+755
-20
lines changed

13 files changed

+755
-20
lines changed

‎demos/jqm-contents.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@
136136
<li data-filtertext="linking pages page links navigation ajax prefetch cache"><a href="../navigation-linking-pages/" data-ajax="false">Linking pages</a></li>
137137
<li data-filtertext="php redirect server redirection server-side navigation"><a href="../navigation-php-redirect/" data-ajax="false">PHP redirect demo</a></li>
138138
<li data-filtertext="navigation redirection hash query"><a href="../navigation-hash-processing/" data-ajax="false">Hash processing demo</a></li>
139+
<li data-filtertext="navigation redirection hash query"><a href="../page-events/" data-ajax="false">Page Navigation Events</a></li>
139140
</ul>
140141
</div>
141142
</li>

‎demos/page-events/alertevents-2.php

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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>Page Events - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../external/jquery/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
15+
<script>
16+
$.mobile.eventLogger({
17+
deprecated: true,
18+
showAlert: true,
19+
events: {
20+
page: true
21+
},
22+
widgets: {
23+
page: true,
24+
pagecontainer: true
25+
}
26+
});
27+
</script>
28+
</head>
29+
<body>
30+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
31+
32+
<div data-role="header" class="jqm-header">
33+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
34+
<p><span class="jqm-version"></span> Demos</p>
35+
<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>
36+
<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>
37+
</div><!-- /header -->
38+
39+
<div role="main" class="ui-content jqm-content">
40+
41+
<h1>Navigate between pages and open and close panel and popup widgets to see which events fire and the data these hold</h1>
42+
<a class="ui-btn ui-corner-all ui" href="alertevents.php">Go To Page 1</a>
43+
<a class="ui-btn ui-corner-all ui" href="alertevents-3.php">Go To Page 3</a>
44+
45+
</div><!-- /content -->
46+
47+
<?php include( '../jqm-navmenu.php' ); ?>
48+
49+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
50+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
51+
<p>Copyright 2014 The jQuery Foundation</p>
52+
</div><!-- /footer -->
53+
54+
<?php include( '../jqm-search.php' ); ?>
55+
56+
</div><!-- /page -->
57+
58+
</body>
59+
</html>

‎demos/page-events/alertevents-3.php

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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>Page Events - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../external/jquery/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
15+
<script>
16+
$.mobile.eventLogger({
17+
deprecated: true,
18+
showAlert: true,
19+
events: {
20+
page: true
21+
},
22+
widgets: {
23+
page: true,
24+
pagecontainer: true
25+
}
26+
});
27+
</script>
28+
</head>
29+
<body>
30+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
31+
32+
<div data-role="header" class="jqm-header">
33+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
34+
<p><span class="jqm-version"></span> Demos</p>
35+
<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>
36+
<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>
37+
</div><!-- /header -->
38+
39+
<div role="main" class="ui-content jqm-content">
40+
41+
<h1>navigate between pages and open and close panel and popup widgets to see which events fire and their data</h1>
42+
<a class="ui-btn ui-corner-all ui" href="alertevents.php">Go To Page 1</a>
43+
<a class="ui-btn ui-corner-all ui" href="alertevents-2.php">Go To Page 2</a>
44+
<a class="ui-btn ui-corner-all ui" href="#popup">Open Popup</a>
45+
46+
</div><!-- /content -->
47+
48+
<?php include( '../jqm-navmenu.php' ); ?>
49+
50+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
51+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
52+
<p>Copyright 2014 The jQuery Foundation</p>
53+
</div><!-- /footer -->
54+
55+
<?php include( '../jqm-search.php' ); ?>
56+
57+
</div><!-- /page -->
58+
59+
</body>
60+
</html>

‎demos/page-events/alertevents.php

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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>Page Events - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../external/jquery/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
15+
<script>
16+
$.mobile.eventLogger({
17+
deprecated: true,
18+
showAlert: true,
19+
events: {
20+
page: true
21+
},
22+
widgets: {
23+
page: true,
24+
pagecontainer: true
25+
}
26+
});
27+
</script>
28+
</head>
29+
<body>
30+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
31+
32+
<div data-role="header" class="jqm-header">
33+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
34+
<p><span class="jqm-version"></span> Demos</p>
35+
<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>
36+
<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>
37+
</div><!-- /header -->
38+
<div id="popup" data-role="popup">
39+
Popup
40+
</div>
41+
<div role="main" class="ui-content jqm-content">
42+
43+
<h1>navigate between pages and open and close panel and popup widgets to see which events fire and their data</h1>
44+
<a class="ui-btn ui-corner-all ui" href="alertevents-2.php">Go To Page 2</a>
45+
<a class="ui-btn ui-corner-all ui" href="alertevents-3.php">Go To Page 3</a>
46+
<a class="ui-btn ui-corner-all ui" href="foo.html">Go To Page that does not exist</a>
47+
<a class="ui-btn ui-corner-all ui" data-rel="popup" href="#popup">Open Popup</a>
48+
<label for="select">Select Menu</label>
49+
<select id="select" data-native-menu="false">
50+
<option>foo</option>
51+
<option>bar</option>
52+
</select>
53+
54+
</div><!-- /content -->
55+
56+
<?php include( '../jqm-navmenu.php' ); ?>
57+
58+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
59+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
60+
<p>Copyright 2014 The jQuery Foundation</p>
61+
</div><!-- /footer -->
62+
63+
<?php include( '../jqm-search.php' ); ?>
64+
65+
</div><!-- /page -->
66+
67+
</body>
68+
</html>

‎demos/page-events/docs.php

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?php
2+
$seconds_to_cache = 3600000;
3+
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
4+
header("Expires: $ts");
5+
header("Pragma: cache");
6+
header("Cache-Control: max-age=$seconds_to_cache");
7+
echo file_get_contents( "http://api.jquerymobile.com/resources/api.xml" );
8+
?>

‎demos/page-events/index.php

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>Page Events - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../external/jquery/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
</head>
15+
<body>
16+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
17+
18+
<div data-role="header" class="jqm-header">
19+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
20+
<p><span class="jqm-version"></span> Demos</p>
21+
<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>
22+
<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>
23+
</div><!-- /header -->
24+
25+
<div role="main" class="ui-content jqm-content">
26+
27+
<h1>Page Events Demo</h1>
28+
29+
<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>
30+
31+
<h2>Event Debugging</h2>
32+
33+
<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>.
34+
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>
35+
36+
<a class="ui-btn ui-corner-all" href="logevents.php" data-ajax="false">View Demo</a>
37+
<a class="ui-btn ui-corner-all" href="alertevents.php" data-ajax="false">View Demo With Alerts</a>
38+
39+
</div><!-- /content -->
40+
41+
<?php include( '../jqm-navmenu.php' ); ?>
42+
43+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
44+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
45+
<p>Copyright 2014 The jQuery Foundation</p>
46+
</div><!-- /footer -->
47+
48+
<?php include( '../jqm-search.php' ); ?>
49+
50+
</div><!-- /page -->
51+
52+
</body>
53+
</html>

‎demos/page-events/logevents-2.php

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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>Page Events - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../external/jquery/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<script src="https://rawgit.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
15+
<script>
16+
$.mobile.eventLogger({
17+
deprecated: true,
18+
events: {
19+
page: true
20+
},
21+
widgets: {
22+
page: true,
23+
pagecontainer: true
24+
}
25+
});
26+
</script>
27+
</head>
28+
<body>
29+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
30+
31+
<div data-role="header" class="jqm-header">
32+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
33+
<p><span class="jqm-version"></span> Demos</p>
34+
<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>
35+
<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>
36+
</div><!-- /header -->
37+
38+
<div role="main" class="ui-content jqm-content">
39+
40+
<h1>Navigate between pages and open and close panel and popup widgets to see which events fire and their data.</h1>
41+
<a class="ui-btn ui-corner-all ui" href="logevents.php">Go To Page 1</a>
42+
<a class="ui-btn ui-corner-all ui" href="logevents-3.php">Go To Page 3</a>
43+
<a class="ui-btn ui-corner-all ui" href="#popup">Open Popup</a>
44+
45+
</div><!-- /content -->
46+
47+
<?php include( '../jqm-navmenu.php' ); ?>
48+
49+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
50+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
51+
<p>Copyright 2014 The jQuery Foundation</p>
52+
</div><!-- /footer -->
53+
54+
<?php include( '../jqm-search.php' ); ?>
55+
56+
</div><!-- /page -->
57+
58+
</body>
59+
</html>

‎demos/page-events/logevents-3.php

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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>Page Events - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../external/jquery/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<script src="https://rawgithub.com/arschmitz/jquery-mobile-event-debugger/v0.0.3/jquery.mobile.event.debugger.js"></script>
15+
<script>
16+
$.mobile.eventLogger({
17+
deprecated: true,
18+
events: {
19+
page: true
20+
},
21+
widgets: {
22+
page: true,
23+
pagecontainer: true
24+
}
25+
});
26+
</script>
27+
</head>
28+
<body>
29+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
30+
31+
<div data-role="header" class="jqm-header">
32+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
33+
<p><span class="jqm-version"></span> Demos</p>
34+
<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>
35+
<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>
36+
</div><!-- /header -->
37+
38+
<div role="main" class="ui-content jqm-content">
39+
40+
<h1>Navigate between pages and open and close panel and popup widgets to see which events fire and their data.</h1>
41+
<a class="ui-btn ui-corner-all ui" href="logevents.php">Go To Page 1</a>
42+
<a class="ui-btn ui-corner-all ui" href="logevents-2.php">Go To Page 2</a>
43+
<a class="ui-btn ui-corner-all ui" href="#popup">Open Popup</a>
44+
45+
</div><!-- /content -->
46+
47+
<?php include( '../jqm-navmenu.php' ); ?>
48+
49+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
50+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
51+
<p>Copyright 2014 The jQuery Foundation</p>
52+
</div><!-- /footer -->
53+
54+
<?php include( '../jqm-search.php' ); ?>
55+
56+
</div><!-- /page -->
57+
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)