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

Demos: Add skipping-past-dialog demo #8524

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Demos: Add skipping-past-dialog demo #8524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 @@ -70,6 +70,7 @@
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
<li data-filtertext="dialog page widget modal popup navigation"><a href="../pages-dialog-nav/" data-ajax="false">Dialog page (with navigation support)</a></li>
</ul>
</div>
</li>
Expand Down
32 changes: 32 additions & 0 deletions demos/pages-dialog-nav/dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog example - 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">
<script src="../../external/jquery/jquery.js"></script>
<script src="../_assets/js/"></script>
<script src="../../js/"></script>
</head>
<body>

<div data-role="dialog" data-dialog="true">

<div data-role="toolbar" data-type="header" data-theme="b">
<h1>Dialog</h1>
</div>

<div role="main" class="ui-content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
<a href="index.php" data-rel="back" class="ui-button ui-shadow ui-corner-all ui-button-a">Sounds good</a>
<a href="index.php" data-rel="back" class="ui-button ui-shadow ui-corner-all ui-button-a">Cancel</a>
<a href="other-page.php" class="ui-button ui-shadow ui-corner-all ui-button-a">Other Page</a>
</div>
</div>

</body>
</html>
70 changes: 70 additions & 0 deletions demos/pages-dialog-nav/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialogs - 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 id="dialog-script">
( function( $ ) {
$( document ).on( "pagecontainerbeforechange", function( event, data ) {
if ( data.options.fromHashChange === true && data.toPage &&
typeof data.toPage !== "string" &&
data.toPage.hasClass( "ui-page-dialog" ) ) {
console.log( "Skipping past dialog" );
window.history[ data.options.direction ]();
return false;
}
} );
} )( jQuery );
</script>
<style>
.ui-page-dialog.dialog-actionsheet .ui-page-dialog-contain {
margin-top: 0;
}
</style>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

<div data-role="toolbar" data-type="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquerymobile-logo.png" alt="jQuery Mobile"></a></h2>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<div class="jqm-banner"><h3>Version <span class="jqm-version"></span> Demos</h3></div>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">

<h1>Dialogs with navigation support</h1>

<p>The behavior whereby a dialog appears but is not reachable via the browser's "Back" or "Forward" buttons, available until now only by means of the dialog widget, can be achieved with the following extension:</p>
<div data-demo-js="#dialog-script" data-demo-html="true">
<a href="dialog.html" class="ui-button ui-corner-all ui-button-inline ui-shadow">Open dialog</a>
</div>

</div><!-- /content -->

<?php include( '../jqm-navmenu.php' ); ?>

<div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<h6>jQuery Mobile Version <span class="jqm-version"></span> Demos</h6>
<ul>
<li><a href="http://jquerymobile.com/" title="Visit the jQuery Mobile web site">jquerymobile.com</a></li>
<li><a href="https://github.com/jquery/jquery-mobile" title="Visit the jQuery Mobile GitHub repository">GitHub repository</a></li>
</ul>
<p>Copyright jQuery Foundation</p>
</div><!-- /footer -->

</div><!-- /page -->

<?php include( '../jqm-search.php' ); ?>

</body>
</html>
54 changes: 54 additions & 0 deletions demos/pages-dialog-nav/other-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialogs - 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>
<style>
.ui-page-dialog.dialog-actionsheet .ui-page-dialog-contain {
margin-top: 0;
}
</style>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

<div data-role="toolbar" data-type="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquerymobile-logo.png" alt="jQuery Mobile"></a></h2>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<div class="jqm-banner"><h3>Version <span class="jqm-version"></span> Demos</h3></div>
</div><!-- /header -->

<div role="main" class="ui-content jqm-content">

<h1>Landing page</h1>

<p>You have reached this page from a dialog. If you click your browser's "Back" button, you will not go back to the dialog, but to the page from which it opened. Similarly, if you then click "Forward", you will skip past the dialog and reach this page again.</p>

</div><!-- /content -->

<?php include( '../jqm-navmenu.php' ); ?>

<div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<h6>jQuery Mobile Version <span class="jqm-version"></span> Demos</h6>
<ul>
<li><a href="http://jquerymobile.com/" title="Visit the jQuery Mobile web site">jquerymobile.com</a></li>
<li><a href="https://github.com/jquery/jquery-mobile" title="Visit the jQuery Mobile GitHub repository">GitHub repository</a></li>
</ul>
<p>Copyright jQuery Foundation</p>
</div><!-- /footer -->

</div><!-- /page -->

<?php include( '../jqm-search.php' ); ?>

</body>
</html>