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

Commit de1b61c

Browse files
author
Gabriel Schulhof
committed
Demos: Move external widgets demo panel content to popup and vice versa
1 parent 3220989 commit de1b61c

File tree

4 files changed

+141
-81
lines changed

4 files changed

+141
-81
lines changed

‎demos/external-widgets/info.php

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,28 @@
3232
<!-- The following panel is shared across all pages of the application, and must therefore be
3333
copied to all the documents containing the application's pages. It will only be loaded
3434
once with the first page. On subsequent page loads the existing widget will be reused. -->
35-
<div id="shared-panel" data-role="panel" data-theme="a">
36-
<form>
37-
<label for="login-field">Login:</label>
38-
<input id="login-field" name="login">
39-
<label for="password-field">Password:</label>
40-
<input type="password" id="password-field" name="password">
41-
</form>
35+
<div id="shared-panel" data-role="panel" data-theme="a" data-position="right">
36+
<ul id="nav-menu-links" data-role="listview">
37+
<li data-icon="lock"><a href="#nav-menu" data-rel="popup">Login</a></li>
38+
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
39+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
40+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
41+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
42+
</ul>
4243
</div>
4344
<div id="shared-header" data-role="header" data-position="fixed" data-theme="a">
4445
<!-- Shared header markup must be added to all documents of the demo to ensure any of them
4546
can serve as the start page. The server can be instructed to omit sending this portion
4647
of the data whenever the request for the document is made via Ajax. -->
4748
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
48-
<a href="#nav-menu" data-rel="popup" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
49+
<a href="#shared-panel" data-rel="panel" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
4950
<div data-role="popup" id="nav-menu" data-theme="a">
50-
<ul id="nav-menu-links">
51-
<li data-icon="lock"><a href="#shared-panel">Login</a></li>
52-
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
53-
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
54-
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
55-
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
56-
</ul>
51+
<form class="ui-content">
52+
<label for="login-field">Login:</label>
53+
<input id="login-field" name="login">
54+
<label for="password-field">Password:</label>
55+
<input type="password" id="password-field" name="password">
56+
</form>
5757
</div>
5858
<h1>Fixed external header</h1>
5959
</div><!-- /header -->

‎demos/external-widgets/page-b.php

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
1+
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?>
22
<!DOCTYPE html>
33
<html>
4-
<head>
4+
<!-- This is an example of a page equipped to handle the startup of an application. It contains
5+
a <head> section common to all pages of the application, and its body contains the markup
6+
for all widgets that will be shared across pages. The body for each page of the application
7+
contains such markup. -->
8+
<head>
9+
10+
<!-- The various documents reachable from within your navigation system must all have the
11+
necessary header information to be able to launch your application. Nevertheless, the
12+
server only needs to send this header information with the first request by the user. On
13+
Ajax requests by the application, this information can be discarded server-side in order
14+
to save bandwidth and to improve the time it takes to display a page. -->
515
<meta charset="utf-8">
616
<meta name="viewport" content="width=device-width, initial-scale=1">
717
<title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title>
@@ -12,36 +22,43 @@
1222
<script src="../../external/jquery/jquery.js"></script>
1323
<script src="../_assets/js/"></script>
1424
<script src="../../js/"></script>
15-
<script src="shared-widget-init.js"></script>
25+
26+
<!-- This script contains the code that is shared between all the documents of your
27+
application. It is responsible for enhancing the shared widgets during your application's
28+
startup. -->
29+
<script id="shared-widget-init" src="shared-widget-init.js"></script>
1630
</head>
1731
<body>
1832
<!-- The following panel is shared across all pages of the application, and must therefore be
1933
copied to all the documents containing the application's pages. It will only be loaded
2034
once with the first page. On subsequent page loads the existing widget will be reused. -->
21-
<div id="shared-panel" data-role="panel" data-theme="a">
22-
<form>
23-
<label for="login-field">Login:</label>
24-
<input id="login-field" name="login">
25-
<label for="password-field">Password:</label>
26-
<input type="password" id="password-field" name="password">
27-
</form>
35+
<div id="shared-panel" data-role="panel" data-theme="a" data-position="right">
36+
<ul id="nav-menu-links" data-role="listview">
37+
<li data-icon="lock"><a href="#nav-menu" data-rel="popup">Login</a></li>
38+
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
39+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
40+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
41+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
42+
</ul>
2843
</div>
29-
<div data-role="header" data-position="fixed" data-theme="a">
44+
<div id="shared-header" data-role="header" data-position="fixed" data-theme="a">
45+
<!-- Shared header markup must be added to all documents of the demo to ensure any of them
46+
can serve as the start page. The server can be instructed to omit sending this portion
47+
of the data whenever the request for the document is made via Ajax. -->
3048
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
31-
<a href="#nav-menu" data-rel="popup" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
49+
<a href="#shared-panel" data-rel="panel" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
3250
<div data-role="popup" id="nav-menu" data-theme="a">
33-
<ul id="nav-menu-links">
34-
<li data-icon="lock"><a href="#shared-panel">Login</a></li>
35-
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
36-
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
37-
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
38-
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
39-
</ul>
51+
<form class="ui-content">
52+
<label for="login-field">Login:</label>
53+
<input id="login-field" name="login">
54+
<label for="password-field">Password:</label>
55+
<input type="password" id="password-field" name="password">
56+
</form>
4057
</div>
4158
<h1>Fixed external header</h1>
4259
</div><!-- /header -->
4360
<?php } ?>
44-
61+
<!-- This is the actual page. It will always be sent to the client. -->
4562
<div data-role="page">
4663

4764
<div class="ui-content" role="main">
@@ -89,8 +106,11 @@
89106

90107
</div><!-- /page -->
91108

92-
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
93-
<div data-role="footer" data-position="fixed" data-theme="a">
109+
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?>
110+
<div id="shared-navbar" data-role="footer" data-position="fixed" data-theme="a">
111+
<!-- Shared navbar markup must be added to all pages of the demo to ensure any of them can
112+
serve as the start page. The server can be instructed to omit sending this portion of
113+
the data whenever the request for the document is made via Ajax. -->
94114
<div data-role="navbar">
95115
<ul>
96116
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>

‎demos/external-widgets/page-c.php

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
1+
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?>
22
<!DOCTYPE html>
33
<html>
4-
<head>
4+
<!-- This is an example of a page equipped to handle the startup of an application. It contains
5+
a <head> section common to all pages of the application, and its body contains the markup
6+
for all widgets that will be shared across pages. The body for each page of the application
7+
contains such markup. -->
8+
<head>
9+
10+
<!-- The various documents reachable from within your navigation system must all have the
11+
necessary header information to be able to launch your application. Nevertheless, the
12+
server only needs to send this header information with the first request by the user. On
13+
Ajax requests by the application, this information can be discarded server-side in order
14+
to save bandwidth and to improve the time it takes to display a page. -->
515
<meta charset="utf-8">
616
<meta name="viewport" content="width=device-width, initial-scale=1">
717
<title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title>
@@ -12,36 +22,43 @@
1222
<script src="../../external/jquery/jquery.js"></script>
1323
<script src="../_assets/js/"></script>
1424
<script src="../../js/"></script>
15-
<script src="shared-widget-init.js"></script>
25+
26+
<!-- This script contains the code that is shared between all the documents of your
27+
application. It is responsible for enhancing the shared widgets during your application's
28+
startup. -->
29+
<script id="shared-widget-init" src="shared-widget-init.js"></script>
1630
</head>
1731
<body>
1832
<!-- The following panel is shared across all pages of the application, and must therefore be
1933
copied to all the documents containing the application's pages. It will only be loaded
2034
once with the first page. On subsequent page loads the existing widget will be reused. -->
21-
<div id="shared-panel" data-role="panel" data-theme="a">
22-
<form>
23-
<label for="login-field">Login:</label>
24-
<input id="login-field" name="login">
25-
<label for="password-field">Password:</label>
26-
<input type="password" id="password-field" name="password">
27-
</form>
35+
<div id="shared-panel" data-role="panel" data-theme="a" data-position="right">
36+
<ul id="nav-menu-links" data-role="listview">
37+
<li data-icon="lock"><a href="#nav-menu" data-rel="popup">Login</a></li>
38+
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
39+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
40+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
41+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
42+
</ul>
2843
</div>
29-
<div data-role="header" data-position="fixed" data-theme="a">
44+
<div id="shared-header" data-role="header" data-position="fixed" data-theme="a">
45+
<!-- Shared header markup must be added to all documents of the demo to ensure any of them
46+
can serve as the start page. The server can be instructed to omit sending this portion
47+
of the data whenever the request for the document is made via Ajax. -->
3048
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
31-
<a href="#nav-menu" data-rel="popup" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
49+
<a href="#shared-panel" data-rel="panel" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
3250
<div data-role="popup" id="nav-menu" data-theme="a">
33-
<ul id="nav-menu-links">
34-
<li data-icon="lock"><a href="#shared-panel">Login</a></li>
35-
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
36-
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
37-
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
38-
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
39-
</ul>
51+
<form class="ui-content">
52+
<label for="login-field">Login:</label>
53+
<input id="login-field" name="login">
54+
<label for="password-field">Password:</label>
55+
<input type="password" id="password-field" name="password">
56+
</form>
4057
</div>
4158
<h1>Fixed external header</h1>
4259
</div><!-- /header -->
4360
<?php } ?>
44-
61+
<!-- This is the actual page. It will always be sent to the client. -->
4562
<div data-role="page">
4663

4764
<div class="ui-content" role="main">
@@ -127,8 +144,11 @@
127144

128145
</div><!-- /page -->
129146

130-
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
131-
<div data-role="footer" data-position="fixed" data-theme="a">
147+
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?>
148+
<div id="shared-navbar" data-role="footer" data-position="fixed" data-theme="a">
149+
<!-- Shared navbar markup must be added to all pages of the demo to ensure any of them can
150+
serve as the start page. The server can be instructed to omit sending this portion of
151+
the data whenever the request for the document is made via Ajax. -->
132152
<div data-role="navbar">
133153
<ul>
134154
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>

‎demos/external-widgets/page-d.php

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
1+
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?>
22
<!DOCTYPE html>
33
<html>
4-
<head>
4+
<!-- This is an example of a page equipped to handle the startup of an application. It contains
5+
a <head> section common to all pages of the application, and its body contains the markup
6+
for all widgets that will be shared across pages. The body for each page of the application
7+
contains such markup. -->
8+
<head>
9+
10+
<!-- The various documents reachable from within your navigation system must all have the
11+
necessary header information to be able to launch your application. Nevertheless, the
12+
server only needs to send this header information with the first request by the user. On
13+
Ajax requests by the application, this information can be discarded server-side in order
14+
to save bandwidth and to improve the time it takes to display a page. -->
515
<meta charset="utf-8">
616
<meta name="viewport" content="width=device-width, initial-scale=1">
717
<title>Ajax optimized persistent toolbars - jQuery Mobile Demos</title>
@@ -12,36 +22,43 @@
1222
<script src="../../external/jquery/jquery.js"></script>
1323
<script src="../_assets/js/"></script>
1424
<script src="../../js/"></script>
15-
<script src="shared-widget-init.js"></script>
25+
26+
<!-- This script contains the code that is shared between all the documents of your
27+
application. It is responsible for enhancing the shared widgets during your application's
28+
startup. -->
29+
<script id="shared-widget-init" src="shared-widget-init.js"></script>
1630
</head>
1731
<body>
1832
<!-- The following panel is shared across all pages of the application, and must therefore be
1933
copied to all the documents containing the application's pages. It will only be loaded
2034
once with the first page. On subsequent page loads the existing widget will be reused. -->
21-
<div id="shared-panel" data-role="panel" data-theme="a">
22-
<form>
23-
<label for="login-field">Login:</label>
24-
<input id="login-field" name="login">
25-
<label for="password-field">Password:</label>
26-
<input type="password" id="password-field" name="password">
27-
</form>
35+
<div id="shared-panel" data-role="panel" data-theme="a" data-position="right">
36+
<ul id="nav-menu-links" data-role="listview">
37+
<li data-icon="lock"><a href="#nav-menu" data-rel="popup">Login</a></li>
38+
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
39+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
40+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
41+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
42+
</ul>
2843
</div>
29-
<div data-role="header" data-position="fixed" data-theme="a">
44+
<div id="shared-header" data-role="header" data-position="fixed" data-theme="a">
45+
<!-- Shared header markup must be added to all documents of the demo to ensure any of them
46+
can serve as the start page. The server can be instructed to omit sending this portion
47+
of the data whenever the request for the document is made via Ajax. -->
3048
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
31-
<a href="#nav-menu" data-rel="popup" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
49+
<a href="#shared-panel" data-rel="panel" class="ui-btn ui-btn-right ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-right ui-icon-navigation">Navigation</a>
3250
<div data-role="popup" id="nav-menu" data-theme="a">
33-
<ul id="nav-menu-links">
34-
<li data-icon="lock"><a href="#shared-panel">Login</a></li>
35-
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>
36-
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
37-
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
38-
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
39-
</ul>
51+
<form class="ui-content">
52+
<label for="login-field">Login:</label>
53+
<input id="login-field" name="login">
54+
<label for="password-field">Password:</label>
55+
<input type="password" id="password-field" name="password">
56+
</form>
4057
</div>
4158
<h1>Fixed external header</h1>
4259
</div><!-- /header -->
4360
<?php } ?>
44-
61+
<!-- This is the actual page. It will always be sent to the client. -->
4562
<div data-role="page">
4663

4764
<div class="ui-content" role="main">
@@ -105,8 +122,11 @@
105122

106123
</div><!-- /page -->
107124

108-
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
109-
<div data-role="footer" data-position="fixed" data-theme="a">
125+
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest' || isset( $_GET['source'])) { ?>
126+
<div id="shared-navbar" data-role="footer" data-position="fixed" data-theme="a">
127+
<!-- Shared navbar markup must be added to all pages of the demo to ensure any of them can
128+
serve as the start page. The server can be instructed to omit sending this portion of
129+
the data whenever the request for the document is made via Ajax. -->
110130
<div data-role="navbar">
111131
<ul>
112132
<li><a href="info.php" data-prefetch="true" data-transition="none">Info</a></li>

0 commit comments

Comments
 (0)