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

Commit 2d6ebd6

Browse files
author
Gabriel Schulhof
committed
Toolbar and navigation: Update fixed persistent optimized demo
1 parent 6aa578d commit 2d6ebd6

File tree

6 files changed

+65
-128
lines changed

6 files changed

+65
-128
lines changed

demos/navigation-ajax-external-widgets/index.php

Lines changed: 2 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
<script src="../../external/jquery/jquery.js"></script>
1212
<script src="../_assets/js/"></script>
1313
<script src="../../js/"></script>
14-
<script type="text/javascript" src="demo.js"></script>
1514
</head>
1615
<body>
1716
<div data-role="page" class="jqm-demos" data-quicklinks="true">
@@ -25,107 +24,8 @@
2524

2625
<div role="main" class="ui-content jqm-content">
2726
<h1>Ajax Navigation And External Widgets</h1>
28-
<p>When Ajax navigation is used in combination with the pushState plugin, the location bar is updated to show the URL of the file that has been loaded via Ajax. This implies that the user may copy that URL and launch your application with a starting URL that is different from the one you had intended. For example, if your application contains two documents, <code>products.html</code> and <code>services.html</code> and if the pages inside the documents contain links to one another, then both documents must be equipped to handle your application's startup. This means that you have to copy script references into the <code>&lt;head&gt;</code> section of each document, and you must also copy external shared widgets (widgets that are not inside the page, but which are seen and/or used from both pages) to the <code>&lt;body&gt;</code> section of both documents.</p>
29-
<p><a href="products.html" data-ajax="false" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open external widgets demo</a></p>
30-
<p>The code snippets below illustrate this structure.</p>
31-
<p>init.js:</p>
32-
<pre><code>
33-
<strong>// Wait for DOMready and instantiate common external widgets that the framework will not
34-
// autoinitialize because they are located outside of a jQuery Mobile page. This script
35-
// must be referenced from all documents containing your application's pages.</strong>
36-
$( function() {
37-
$( &quot;#common-header&quot; ).toolbar();
38-
$( &quot;#nav-menu&quot; )
39-
.children()
40-
.listview()
41-
.end()
42-
.popup();
43-
});
44-
</code></pre>
45-
<p>products.html:</p>
46-
<pre><code>
47-
&lt;!doctype html&gt;
48-
&lt;html&gt;
49-
&lt;head&gt;
50-
&lt;title&gt;Products&lt;/title&gt;
51-
52-
<strong>&lt;!-- References to the scripts and stylesheets required for application startup must appear in all
53-
documents containing your application's pages, because any one of them can become the start page --&gt;</strong>
54-
&lt;meta charset=&quot;utf-8&quot;&gt;
55-
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
56-
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css&quot;/&gt;
57-
&lt;script src=&quot;http://code.jquery.com/jquery-1.10.2.js&quot;&gt;&lt;/script&gt;
58-
&lt;script src=&quot;http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js&quot;&gt;&lt;/script&gt;
59-
<strong>&lt;script src=&quot;init.js&quot;&gt;&lt;/script&gt;</strong>
60-
&lt;/head&gt;
61-
&lt;body&gt;
62-
63-
<strong>&lt;!-- The header and the popup must be copied verbatim into each document that can serve as
64-
the start page. They must also be themed explicitly because they do not inherit their
65-
theme swatches from the page, since they are not contained inside a page. --&gt;</strong>
66-
&lt;div data-role=&quot;header&quot; id=&quot;common-header&quot; data-theme=&quot;a&quot;&gt;
67-
&lt;h1&gt;Welcome to International Widgets, Inc.&lt;/h1&gt;
68-
&lt;a href=&quot;#nav-menu&quot; data-rel=&quot;popup&quot; class=&quot;ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-right ui-corner-all&quot;&gt;Navigate our site&lt;/a&gt;
69-
&lt;/div&gt;
70-
71-
&lt;div data-role=&quot;popup&quot; id=&quot;nav-menu&quot; data-theme=&quot;a&quot;&gt;
72-
&lt;ul data-role=&quot;listview&quot;&gt;
73-
&lt;li&gt;&lt;a href=&quot;products.html&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
74-
&lt;li&gt;&lt;a href=&quot;services.html&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
75-
&lt;/ul&gt;
76-
&lt;/div&gt;
77-
78-
&lt;div data-role=&quot;page&quot; id=&quot;products&quot;&gt;
79-
&lt;div class=&quot;ui-content&quot;&gt;
80-
&lt;h1&gt;Products&lt;/h1&gt;
81-
&lt;p&gt;We offer a wide range of products designed to suit your specific needs.&lt;/p&gt;
82-
&lt;/div&gt;
83-
&lt;/div&gt;
84-
&lt;/body&gt;
85-
&lt;/html&gt;
86-
</code></pre>
87-
<p>services.html:</p>
88-
<pre><code>
89-
&lt;!doctype html&gt;
90-
&lt;html&gt;
91-
&lt;head&gt;
92-
&lt;title&gt;Services&lt;/title&gt;
93-
94-
<strong>&lt;!-- References to the scripts and stylesheets required for application startup must appear in all
95-
documents containing your application's pages, because any one of them can become the start page --&gt;</strong>
96-
&lt;meta charset=&quot;utf-8&quot;&gt;
97-
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
98-
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css&quot;/&gt;
99-
&lt;script src=&quot;http://code.jquery.com/jquery-1.10.2.js&quot;&gt;&lt;/script&gt;
100-
&lt;script src=&quot;http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js&quot;&gt;&lt;/script&gt;
101-
<strong>&lt;script src=&quot;init.js&quot;&gt;&lt;/script&gt;</strong>
102-
&lt;/head&gt;
103-
&lt;body&gt;
104-
105-
<strong>&lt;!-- The header and the popup must be copied verbatim into each document that can serve as
106-
the start page. They must also be themed explicitly because they do not inherit their
107-
theme swatches from the page, since they are not contained inside a page. --&gt;</strong>
108-
&lt;div data-role=&quot;header&quot; id=&quot;common-header&quot; data-theme=&quot;a&quot;&gt;
109-
&lt;h1&gt;Welcome to International Widgets, Inc.&lt;/h1&gt;
110-
&lt;a href=&quot;#nav-menu&quot; data-rel=&quot;popup&quot; class=&quot;ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-right ui-corner-all&quot;&gt;Navigate our site&lt;/a&gt;
111-
&lt;/div&gt;
112-
113-
&lt;div data-role=&quot;popup&quot; id=&quot;nav-menu&quot; data-theme=&quot;a&quot;&gt;
114-
&lt;ul data-role=&quot;listview&quot;&gt;
115-
&lt;li&gt;&lt;a href=&quot;products.html&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
116-
&lt;li&gt;&lt;a href=&quot;services.html&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
117-
&lt;/ul&gt;
118-
&lt;/div&gt;
119-
120-
&lt;div data-role=&quot;page&quot; id=&quot;products&quot;&gt;
121-
&lt;div class=&quot;ui-content&quot;&gt;
122-
&lt;h1&gt;Services&lt;/h1&gt;
123-
&lt;p&gt;Allow our experts to design and deliver the solutions you need.&lt;/p&gt;
124-
&lt;/div&gt;
125-
&lt;/div&gt;
126-
&lt;/body&gt;
127-
&lt;/html&gt;
128-
</code></pre>
27+
<p>When Ajax navigation is used in combination with the pushState plugin, the location bar is updated to show the URL of the file that has been loaded via Ajax. This implies that the user may copy that URL and launch your application with a starting URL that is different from the one you had intended. For example, if your application contains two or more documents and if the pages inside the documents contain links to one another, then both documents must be equipped to handle your application's startup. This means that you have to copy script references into the <code>&lt;head&gt;</code> section of each document, and you must also copy external shared widgets (widgets that are not inside the page, but which are seen and/or used from both pages) to the <code>&lt;body&gt;</code> section of both documents.</p>
28+
<p>The <a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">fixed persistent optimized toolbar demo</a> illustrates the structure necessary for maintaining shared widgets across multiple pages linked via Ajax.</p>
12929
</div><!-- /content -->
13030

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

demos/toolbar-fixed-persistent-optimized/index.php

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,23 @@
1212
<script src="../../external/jquery/jquery.js"></script>
1313
<script src="../_assets/js/"></script>
1414
<script src="../../js/"></script>
15-
<script>
16-
$(function(){
17-
$("[data-role='navbar']").navbar();
18-
$("[data-role='header'], [data-role='footer']").toolbar();
19-
});
20-
</script>
15+
<script id="shared-widget-init" src="shared-widget-init.js"></script>
2116
</head>
2217
<body>
23-
<div data-role="header" data-position="fixed" data-theme="a">
18+
<div id="shared-header" data-role="header" data-position="fixed" data-theme="a">
19+
<!-- Shared header markup must be added to all pages of the demo to ensure any of them can
20+
serve as the start page. The server can be instructed to omit sending this portion of
21+
the data whenever the request for the document is made via Ajax. -->
2422
<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>
23+
<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>
24+
<div data-role="popup" id="nav-menu" data-theme="a">
25+
<ul id="nav-menu-links">
26+
<li><a href="index.php" data-prefetch="true" data-transition="none">Info</a></li>
27+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
28+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
29+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
30+
</ul>
31+
</div>
2532
<h1>Fixed external header</h1>
2633
</div><!-- /header -->
2734
<?php } ?>
@@ -41,12 +48,19 @@
4148

4249
<p>All of the markup not needed when being requested via Ajax is wrapped in if statements like the one above.</p>
4350

51+
<h2>Shared scripts and widgets</h2>
52+
<p>Any one of the pages in this demo must be able to serve as the start page for your application. Thus, when accessed via plain HTTP, the server will return the full page, including references to jQuery and jQuery Mobile, as well as custom scripts which ensure that widgets shared by all the pages in the application are initialized at startup, no matter which page the user chooses as their start page.</p>
53+
<div data-demo-html="#shared-header,#shared-navbar" data-demo-js="#shared-widget-init"></div>
54+
4455
</div><!-- /content -->
4556

4657
</div><!-- /page -->
4758

4859
<?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?>
49-
<div data-role="footer" data-position="fixed" data-theme="a">
60+
<div id="shared-navbar" data-role="footer" data-position="fixed" data-theme="a">
61+
<!-- Shared navbar markup must be added to all pages of the demo to ensure any of them can
62+
serve as the start page. The server can be instructed to omit sending this portion of
63+
the data whenever the request for the document is made via Ajax. -->
5064
<div data-role="navbar">
5165
<ul>
5266
<li><a href="index.php" data-prefetch="true" data-transition="none">Info</a></li>

demos/toolbar-fixed-persistent-optimized/page-b.php

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,20 @@
1212
<script src="../../external/jquery/jquery.js"></script>
1313
<script src="../_assets/js/"></script>
1414
<script src="../../js/"></script>
15-
<script>
16-
$(function(){
17-
$("[data-role='navbar']").navbar();
18-
$("[data-role='header'], [data-role='footer']").toolbar();
19-
});
20-
</script>
15+
<script src="shared-widget-init.js"></script>
2116
</head>
2217
<body>
2318
<div data-role="header" data-position="fixed" data-theme="a">
2419
<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>
20+
<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>
21+
<div data-role="popup" id="nav-menu" data-theme="a">
22+
<ul id="nav-menu-links">
23+
<li><a href="index.php" data-prefetch="true" data-transition="none">Info</a></li>
24+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
25+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
26+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
27+
</ul>
28+
</div>
2529
<h1>Fixed external header</h1>
2630
</div><!-- /header -->
2731
<?php } ?>

demos/toolbar-fixed-persistent-optimized/page-c.php

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,20 @@
1212
<script src="../../external/jquery/jquery.js"></script>
1313
<script src="../_assets/js/"></script>
1414
<script src="../../js/"></script>
15-
<script>
16-
$(function(){
17-
$("[data-role='navbar']").navbar();
18-
$("[data-role='header'], [data-role='footer']").toolbar();
19-
});
20-
</script>
15+
<script src="shared-widget-init.js"></script>
2116
</head>
2217
<body>
2318
<div data-role="header" data-position="fixed" data-theme="a">
2419
<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>
20+
<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>
21+
<div data-role="popup" id="nav-menu" data-theme="a">
22+
<ul id="nav-menu-links">
23+
<li><a href="index.php" data-prefetch="true" data-transition="none">Info</a></li>
24+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
25+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
26+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
27+
</ul>
28+
</div>
2529
<h1>Fixed external header</h1>
2630
</div><!-- /header -->
2731
<?php } ?>

demos/toolbar-fixed-persistent-optimized/page-d.php

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,20 @@
1212
<script src="../../external/jquery/jquery.js"></script>
1313
<script src="../_assets/js/"></script>
1414
<script src="../../js/"></script>
15-
<script>
16-
$(function(){
17-
$("[data-role='navbar']").navbar();
18-
$("[data-role='header'], [data-role='footer']").toolbar();
19-
});
20-
</script>
15+
<script src="shared-widget-init.js"></script>
2116
</head>
2217
<body>
2318
<div data-role="header" data-position="fixed" data-theme="a">
2419
<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>
20+
<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>
21+
<div data-role="popup" id="nav-menu" data-theme="a">
22+
<ul id="nav-menu-links">
23+
<li><a href="index.php" data-prefetch="true" data-transition="none">Info</a></li>
24+
<li><a href="page-b.php" data-prefetch="true" data-transition="flip">Friends</a></li>
25+
<li><a href="page-c.php" data-prefetch="true" data-transition="turn">Albums</a></li>
26+
<li><a href="page-d.php" data-prefetch="true" data-transition="slide">Emails</a></li>
27+
</ul>
28+
</div>
2529
<h1>Fixed external header</h1>
2630
</div><!-- /header -->
2731
<?php } ?>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* You can place the code for initializing widgets that are shared by the various pages of yout
2+
application and which reside outside your application's jQuery Mobile pages into an external
3+
script which you can then reference from all your application's pages. This way, no matter which
4+
page ends up being your application's startup page, the shared widgets will always be functional
5+
and correctly enhanced. */
6+
$( function() {
7+
$( "[data-role='navbar']" ).navbar();
8+
$( "[data-role='header'], [data-role='footer']" ).toolbar();
9+
$( "#nav-menu" ).popup();
10+
$( "#nav-menu-links" ).listview();
11+
});

0 commit comments

Comments
 (0)