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

Page events demo and pagecontainer updates #7285

Closed
wants to merge 3 commits into from
Closed

Page events demo and pagecontainer updates #7285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5319adc
Pagecontainer: make all page events go through triggerWithDeprecated
arschmitz Mar 13, 2014
f83a9c3
Selectmenu: Update demo to no longer rely on deprecated page events
Jun 18, 2014
5919875
Pagecontainer: Move "pageinit" event to deprecated section
Jun 18, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demos/jqm-contents.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
59 changes: 59 additions & 0 deletions demos/page-events/alertevents-2.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
60 changes: 60 additions & 0 deletions demos/page-events/alertevents-3.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
68 changes: 68 additions & 0 deletions demos/page-events/alertevents.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 8 additions & 0 deletions demos/page-events/docs.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" );
?>
53 changes: 53 additions & 0 deletions demos/page-events/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
59 changes: 59 additions & 0 deletions demos/page-events/logevents-2.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
59 changes: 59 additions & 0 deletions demos/page-events/logevents-3.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading