|
11 | 11 | <script src="../../external/jquery/jquery.js"></script>
|
12 | 12 | <script src="../_assets/js/"></script>
|
13 | 13 | <script src="../../js/"></script>
|
14 |
| - <script type="text/javascript" src="demo.js"></script> |
15 | 14 | </head>
|
16 | 15 | <body>
|
17 | 16 | <div data-role="page" class="jqm-demos" data-quicklinks="true">
|
|
25 | 24 |
|
26 | 25 | <div role="main" class="ui-content jqm-content">
|
27 | 26 | <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><head></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><body></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 |
| - $( "#common-header" ).toolbar(); |
38 |
| - $( "#nav-menu" ) |
39 |
| - .children() |
40 |
| - .listview() |
41 |
| - .end() |
42 |
| - .popup(); |
43 |
| -}); |
44 |
| -</code></pre> |
45 |
| - <p>products.html:</p> |
46 |
| -<pre><code> |
47 |
| -<!doctype html> |
48 |
| -<html> |
49 |
| -<head> |
50 |
| - <title>Products</title> |
51 |
| - |
52 |
| - <strong><!-- 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 --></strong> |
54 |
| - <meta charset="utf-8"> |
55 |
| - <meta name="viewport" content="width=device-width, initial-scale=1"> |
56 |
| - <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css"/> |
57 |
| - <script src="http://code.jquery.com/jquery-1.10.2.js"></script> |
58 |
| - <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script> |
59 |
| - <strong><script src="init.js"></script></strong> |
60 |
| -</head> |
61 |
| -<body> |
62 |
| - |
63 |
| - <strong><!-- 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. --></strong> |
66 |
| - <div data-role="header" id="common-header" data-theme="a"> |
67 |
| - <h1>Welcome to International Widgets, Inc.</h1> |
68 |
| - <a href="#nav-menu" data-rel="popup" class="ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-right ui-corner-all">Navigate our site</a> |
69 |
| - </div> |
70 |
| - |
71 |
| - <div data-role="popup" id="nav-menu" data-theme="a"> |
72 |
| - <ul data-role="listview"> |
73 |
| - <li><a href="products.html">Products</a></li> |
74 |
| - <li><a href="services.html">Services</a></li> |
75 |
| - </ul> |
76 |
| - </div> |
77 |
| - |
78 |
| - <div data-role="page" id="products"> |
79 |
| - <div class="ui-content"> |
80 |
| - <h1>Products</h1> |
81 |
| - <p>We offer a wide range of products designed to suit your specific needs.</p> |
82 |
| - </div> |
83 |
| - </div> |
84 |
| -</body> |
85 |
| -</html> |
86 |
| -</code></pre> |
87 |
| - <p>services.html:</p> |
88 |
| -<pre><code> |
89 |
| -<!doctype html> |
90 |
| -<html> |
91 |
| -<head> |
92 |
| - <title>Services</title> |
93 |
| - |
94 |
| - <strong><!-- 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 --></strong> |
96 |
| - <meta charset="utf-8"> |
97 |
| - <meta name="viewport" content="width=device-width, initial-scale=1"> |
98 |
| - <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css"/> |
99 |
| - <script src="http://code.jquery.com/jquery-1.10.2.js"></script> |
100 |
| - <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script> |
101 |
| - <strong><script src="init.js"></script></strong> |
102 |
| -</head> |
103 |
| -<body> |
104 |
| - |
105 |
| - <strong><!-- 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. --></strong> |
108 |
| - <div data-role="header" id="common-header" data-theme="a"> |
109 |
| - <h1>Welcome to International Widgets, Inc.</h1> |
110 |
| - <a href="#nav-menu" data-rel="popup" class="ui-btn ui-icon-grid ui-btn-icon-notext ui-btn-right ui-corner-all">Navigate our site</a> |
111 |
| - </div> |
112 |
| - |
113 |
| - <div data-role="popup" id="nav-menu" data-theme="a"> |
114 |
| - <ul data-role="listview"> |
115 |
| - <li><a href="products.html">Products</a></li> |
116 |
| - <li><a href="services.html">Services</a></li> |
117 |
| - </ul> |
118 |
| - </div> |
119 |
| - |
120 |
| - <div data-role="page" id="products"> |
121 |
| - <div class="ui-content"> |
122 |
| - <h1>Services</h1> |
123 |
| - <p>Allow our experts to design and deliver the solutions you need.</p> |
124 |
| - </div> |
125 |
| - </div> |
126 |
| -</body> |
127 |
| -</html> |
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><head></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><body></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> |
129 | 29 | </div><!-- /content -->
|
130 | 30 |
|
131 | 31 | <?php include( '../jqm-navmenu.php' ); ?>
|
|
0 commit comments